前端代码优化

ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。

应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。

通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。
区分他们，使他们具有特殊意义，通常需要为“帮手”。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义，
语义化的名称 通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。

不推荐

  1. .fw-800 {
  2. font-weight: 800;
  3. }
  4. .red {
  5. color: red;
  6. }

推荐

  1. .heavy {
  2. font-weight: 800;
  3. }
  4. .important {
  5. color: red;
  6. }

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

不推荐

  1. #content .title {
  2. font-size: 2em;
  3. }

推荐

  1. .content .title {
  2. font-size: 2em;
  3. }

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器，这使得它很奇怪。

  1. // 这个选择器权重高于下面的选择器
  2. #content .title {
  3. color: red;
  4. }
  5. // than this selector!
  6. html body div.content.news-content .title.content-title.important {
  7. color: blue;
  8. }

CSS选择器中避免标签名

当构建选择器时应该使用清晰， 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
，而不是你的代码元素，这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

不推荐

  1. div.content > header.content-header > h2.title {
  2. font-size: 2em;
  3. }

推荐

  1. .content > .content-header > .title {
  2. font-size: 2em;
  3. }

尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。

考虑下面的DOM:

  1. <article class="content news-content">
  2. <span class="title">News event</span>
  3. <div class="content-body">
  4. <div class="title content-title">
  5. Check this out
  6. </div>
  7. <p>This is a news article content</p>
  8. <div class="teaser">
  9. <div class="title">Buy this</div>
  10. <div class="teaser-content">Yey!</div>
  11. </div>
  12. </div>
  13. </article>

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类 和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

  1. .content .title {
  2. font-size: 2rem;
  3. }

推荐

  1. .content > .title {
  2. font-size: 2rem;
  3. }
  4. .content > .content-body > .title {
  5. font-size: 1.5rem;
  6. }
  7. .content > .content-body > .teaser > .title {
  8. font-size: 1.2rem;
  9. }

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

  1. border-top-style: none;
  2. font-family: palatino, georgia, serif;
  3. font-size: 100%;
  4. line-height: 1.6;
  5. padding-bottom: 2em;
  6. padding-left: 1em;
  7. padding-right: 1em;
  8. padding-top: 0;

推荐

  1. border-top: 0;
  2. font: 100%/1.6 palatino, georgia, serif;
  3. padding: 0 1em 2em;

0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

不推荐

  1. padding-bottom: 0px;
  2. margin: 0em;

推荐

  1. padding-bottom: 0;
  2. margin: 0;

十六进制表示法

在可能的情况下，使用3个字符的十六进制表示法。
颜色值允许这样表示，
3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

不推荐

  1. color: #FF33AA;

推荐

  1. color: #f3a;

ID 和 Class（类） 名的分隔符

使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

另外，作为该标准，预设属性选择器能识别连字符（中划线）作为单词[attribute|=value]的分隔符，
所以最好的坚持使用连字符作为分隔符。

不推荐

  1. .demoimage {}
  2. .error_status {}

推荐

  1. #video-id {}
  2. .ads-sample {}

Hacks

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜，变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库，这两种方法都应该被认为是最后的手段。换句话说，从长远来看，用户代理检测和hacks
会伤害项目，作为项目往往应该采取阻力最小的途径。也就是说，轻易允许使用用户代理检测和hacks 以后将过于频繁。

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

  1. 结构性属性：

    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. 表现性属性：
    1. background, border etc.
    2. font, text

不推荐

  1. .box {
  2. font-family: ‘Arial‘, sans-serif;
  3. border: 3px solid #ddd;
  4. left: 30%;
  5. position: absolute;
  6. text-transform: uppercase;
  7. right: 30%;
  8. isplay: block;
  9. font-size: 1.5rem;
  10. overflow: hidden;
  11. padding: 1em;
  12. margin: 1em;
  13. }

推荐

  1. .box {
  2. display: block;
  3. position: absolute;
  4. left: 30%;
  5. right: 30%;
  6. overflow: hidden;
  7. margin: 1em;
  8. padding: 1em;
  9. border: 3px solid #ddd;
  10. font-family: ‘Arial‘, sans-serif;
  11. font-size: 1.5rem;
  12. text-transform: uppercase;
  13. }

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

不推荐

  1. .test {
  2. display: block; height: 100px
  3. }

推荐

  1. .test {
  2. display: block;
  3. height: 100px;
  4. }

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

不推荐

  1. h3 {
  2. font-weight:bold;
  3. }

推荐

  1. h3 {
  2. font-weight: bold;
  3. }

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

  1. a:focus, a:active {
  2. position: relative; top: 1px;
  3. }

推荐

  1. h1,
  2. h2,
  3. h3 {
  4. font-weight: normal;
  5. line-height: 1.2;
  6. }

规则分隔

规则之间始终有一个空行（双换行符）分隔。

推荐

  1. html {
  2. background: #fff;
  3. }
  4. body {
  5. margin: auto;
  6. width: 50%;
  7. }

CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。

不推荐

  1. @import url(‘//cdn.com/foundation.css‘);
  2. html {
  3. font-family: ‘open sans‘, arial, sans-serif;
  4. }
  5. body:after {
  6. content: ‘pause‘;
  7. }

推荐

  1. @import url(//cdn.com/foundation.css);
  2. html {
  3. font-family: "open sans", arial, sans-serif;
  4. }
  5. body:after {
  6. content: "pause";
  7. }

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

  1. // Not a good example by not making use of nesting at all
  2. .content {
  3. display: block;
  4. }
  5. .content > .news-article > .title {
  6. font-size: 1.2em;
  7. }

不推荐

  1. // Using nesting is better but not in all cases
  2. // Avoid nesting when there is no attributes and use selector chains instead
  3. .content {
  4. display: block;
  5. > .news-article {
  6. > .title {
  7. font-size: 1.2em;
  8. }
  9. }
  10. }

推荐

  1. // This example takes the best approach while nesting but use selector chains where possible
  2. .content {
  3. display: block;
  4. > .news-article > .title {
  5. font-size: 1.2em;
  6. }
  7. }

嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

  1. .content {
  2. display: block;
  3. > .news-article {
  4. > .title {
  5. font-size: 1.2em;
  6. }
  7. > .article-footnote {
  8. font-size: 0.8em;
  9. }
  10. }
  11. }

推荐

  1. .content {
  2. display: block;
  3. > .news-article {
  4. > .title {
  5. font-size: 1.2em;
  6. }
  7. > .article-footnote {
  8. font-size: 0.8em;
  9. }
  10. }
  11. }

上下文媒体查询(SCSS)

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便，
有助于保持媒体查询属于的上下文。

第一种方法这可以让你先写你的手机样式，然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。

不推荐

  1. // This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
  2. // on the bottom in a media query. This is error prone and makes maintenance harder as it‘s not so easy to relate
  3. // the content in the media query to the content in the upper part (mobile style)
  4. .content-page {
  5. font-size: 1.2rem;
  6. > .main {
  7. > .latest-news {
  8. padding: 1rem;
  9. > .news-article {
  10. padding: 1rem;
  11. > .title {
  12. font-size: 2rem;
  13. }
  14. }
  15. }
  16. > .content {
  17. margin-top: 2rem;
  18. padding: 1rem;
  19. }
  20. }
  21. > .page-footer {
  22. margin-top: 2rem;
  23. font-size: 1rem;
  24. }
  25. }
  26. @media screen and (min-width: 641px) {
  27. .content-page {
  28. font-size: 1rem;
  29. > .main > .latest-news > .news-article > .title {
  30. font-size: 3rem;
  31. }
  32. > .page-footer {
  33. font-size: 0.8rem;
  34. }
  35. }
  36. }

推荐

  1. // This is the same example as above but here we use contextual media queries in order to put the different styles
  2. // for different media into the right context.
  3. .content-page {
  4. font-size: 1.2rem;
  5. @media screen and (min-width: 641px) {
  6. font-size: 1rem;
  7. }
  8. > .main {
  9. > .latest-news {
  10. padding: 1rem;
  11. > .news-article {
  12. padding: 1rem;
  13. > .title {
  14. font-size: 2rem;
  15. @media screen and (min-width: 641px) {
  16. font-size: 3rem;
  17. }
  18. }
  19. }
  20. }
  21. > .content {
  22. margin-top: 2rem;
  23. padding: 1rem;
  24. }
  25. }
  26. > .page-footer {
  27. margin-top: 2rem;
  28. font-size: 1rem;
  29. @media screen and (min-width: 641px) {
  30. font-size: 0.8rem;
  31. }
  32. }
  33. }

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性
  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子选择器作为最后的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

  1. .product-teaser {
  2. // 1. Style attributes
  3. display: inline-block;
  4. padding: 1rem;
  5. color: grey;
  6. // 2. Pseudo selectors with parent selector
  7. &:hover {
  8. color: black;
  9. }
  10. // 3. Pseudo elements with parent selector
  11. &:before {
  12. content: "";
  13. display: block;
  14. border-top: 1px solid grey;
  15. }
  16. &:after {
  17. content: "";
  18. display: block;
  19. border-top: 1px solid grey;
  20. }
  21. // 4. State classes with parent selector
  22. &.active {
  23. color: red;
  24. // 4.2. Pseuso selector in state class selector
  25. &:hover {
  26. color: darkred;
  27. }
  28. }
  29. // 5. Contextual media queries
  30. @media screen and (max-width: 640px) {
  31. display: block;
  32. font-size: 2em;
  33. }
  34. // 6. Sub selectors
  35. > .content > .title {
  36. font-size: 1.2em;
  37. // 6.5. Contextual media queries in sub selector
  38. @media screen and (max-width: 640px) {
  39. letter-spacing: 0.2em;
  40. text-transform: uppercase;
  41. }
  42. }
  43. }
时间： 2024-12-22 19:34:05

前端代码优化的相关文章

前端代码优化(转)

所谓代码优化是指对程序代码进行等价(指不改变程序的运行结果)变换.程序代码可以是中间代码(如四元式代码),也可以是目标代码.等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同.优化的含义是最终生成的目标代码短(运行时间更短.占用空间更小),时空效率优化.原则上,优化可以再编译的各个阶段进行,但最主要的一类是对中间代码进行优化,这类优化不依赖于具体的计算机. 要点: 一. 尽量采用div+css布局您的页面,div+css布局的好处是让搜索引擎爬虫能够更顺利的.更快的.更友好的爬完您的页

前端代码优化的基本原则

前端技术的逐渐成熟,还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术.这些技术的出现和大量使用都和并发资源数有关. 按照普通设计,当网站cookie信息有1 KB.网站首页共150个资源时,用户在请求过程中需要发送150 KB的cookie信息,在512 Kbps的常见上行带宽下,需要长达3秒左右才能全部发送完毕. 尽管这个过程可以和页

前端代码优化方法

一.减少HTTP请求 1.合并CSS.js:每次调用js.css都要发送一次http请求,所以并不是分开写好几个文件比较好 js.css压缩.js压缩可以用grunt HTML优化: 使用语义化标签 减少iframe:iframe是SEO的大忌,iframe有好处也有弊端 避免重定向 CSS优化: 删除空样式 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加 选择器性能优化 避免使用表达式,避免用id写样式 js优化: 压缩 减少重复代码 2.图片优化 图片合并,CSS sprite技术

前端代码优化资料汇总

http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html(已读) http://www.cnblogs.com/wildweeds/archive/2010/06/12/web_performance.html(已读,太简短,讲解不是太明白) http://www.cnblogs.com/moonvan/archive/2011/12/09/2282710.html(已读,讲解如何

2015年3月-前端开发月刊

1. 创业 2. 职业|项目管理 3. git 4. 知乎(zhihu) 5. 其它 6. Angular 7. 看书学习 8. 移动开发 9. Html5 10. CSS3 11. Javascript 前言: 技术只是一种手段,不是目的.人生的投资有很多种,很多个方向.技术只是其中的一个方向,是目前兴趣的所在点.兴趣会随着岁月的流逝,年龄的增长,会发生变化. 当然鸡蛋不能放在一个篮子里边,所以, 有空的时候提前看看,创业类的,产品,市场,营销类的书籍,提前给自己找点出路,免得后期技术路线走不

前端笔试总结

一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? <!DOCTYPE> 声明位于文档中的最

实习系列1

实习,抱着一颗学习的心态因为底子薄,发现很多东西不会,学得完全不够用!这个捉急啊.这一个月来接触了很多新东西,zepto,自适应布局,-webkit-私有属性,less,git,ajax,表单验证,正则表达式...每一个知识点都需要花时间才能学得好,可是我啊,每一项花的时间都不是很多,有点浮在上面,总感觉很多都得学,都想学,最后发现,到现在还没有那一项是拿的出手的.这可不行呀,我的内心告诉我,沉下去,一步一步走,专注在一件事上,制定学习计划(重点是落实计划)...说了一堆还没有进入正题,惭愧.

阿里2014前端线上笔试题目（答案待补充）

题目及部分答案转载自 WEB前端开发(www.css119.com) No.1 下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等.请使用 css3 中的功能实现它们的布局. 已知 html 结构是: <div>  <div>column 1</div>  <div>column 2</div>  <div>column 3</div> </div> 答案:

Frontend RSS

Ref:线程到底是什么?(iOS) Ref:JS与多线程 Ref:无处不在的Babel Ref:前端项目架构小结 Ref:10 个打造 React.js App 的最佳 UI 框架 Ref:总有你要的编程书单(GitHub) Ref:bendc/frontend-guidelines Ref:GitHub 上一份很受欢迎的前端代码优化指南-强烈推荐收藏 Ref:免费的海量编程中文书籍索引-都是干货[强烈建议收藏] Ref:[译]JavaScript规范-葵花宝典 Ref:书写高质量JavaScr