20条书写 CSS 代码的建议
rvtz3818
7年前
<p>在这篇文章中，我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手，而有些则更高级一些，但我希望每个人都可以在本篇文章中收获自己不知道的知识。</p> <h3><strong>1. 谨慎使用外边距属性</strong></h3> <p>与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。</p> <pre> <code class="language-css"><div class="square red"></div> <div class="square blue"></div> .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2196F3; margin-top: 30px; }</code></pre> <p>其实上述两个元素在垂直方向上的距离并不是 70px， 而是 40px， 蓝色正方形的 margin 没有被计算在内。 有很多的方法消除这种默认的行为，但最好的方法是只使用一个方向上的 margin 属性，比如说 margin-bottom 。</p> <h3><strong>2. 利用盒子模型布局</strong></h3> <p>盒子模型自然有其存在的理由。 float 和 inline-block 当然也可以工作，但它们都是样式化文档的基础工具，而不是整个网站。从某种意义来说， Flexbox 是为更容易更精确创建我们想要的布局而设计的。</p> <p>Flexbox 模型提供的一系列属性给了开发者更大的灵活性，而且你一旦熟悉了它们，那创建任何响应式布局都是轻而易举的事。浏览器对 Flexbox 的支持也已经接近完美，所以已经没有什么理由能够阻止你使用 Flexbox 了。</p> <pre> <code class="language-css">.container { display: flex; /* Don't forget to add prefixes for Safari */ display: -webkit-flex; }</code></pre> <h3><strong>3. 执行 CSS 重置</strong></h3> <p>尽管这些年来情形已经有所好转，但是各浏览器的默认行为还是存在很多分歧。解决这个问题最好的办法就是使用一个 CSS 重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作，并且在所有浏览器中产生相同的结果。</p> <p>有很多的库做这个工作做的非常不错，比如 normalize.css, minireset , 和 ress ， 纠正了浏览器间的不一致。如果你不想使用库，你也可以自己制作一个简单的 CSS 重置，像下面这样。</p> <pre> <code class="language-css">* { margin: 0; padding: 0; box-sizing: border-box; }</code></pre> <p>这可能看上去比较苛刻，但是消除了默认的 margin 和 padding 我们将更容易的摆放我们的元素，而不用担心它会占用额外的空间。 box-sizing: border-box 是一个很受用的属性，我们将在下面介绍这个属性。</p> <h3><strong>4. 为所有元素使用 Border-box</strong></h3> <p>许多初学者不知道 box-sizing 属性，但它的确很重要。了解它的最好办法就是看看它的两个可选值。</p> <ul> <li> <p>content-box (default) - 当我们为元素设置了宽度和高度，但那只是内容的尺寸。所有的 padding 和 border 都在不包含在内容当中，也就是在内容的外部。举例来说，如果我们有一个 div 它的宽度为 100px， padding 为 10px, 那么它的实际宽度为 120px。</p> </li> <li> <p>border-box - padding 和 border 被包含在 宽度和高度当中。 如果一个 div 的宽度为 100px ，而被设置了 box-sizing: border-box ， 那么它的宽度将始终是 100px ， 无论你添加多少 padding 和 border 。</p> </li> </ul> <p>为所有元素设置 border-box 将有利于样式化，而且你在也不用做乏味的数学运算了。</p> <h3><strong>5. 图像作为背景</strong></h3> <p>当你为自己的站点添加图片时，尤其是你想做响应式设计的时候，利用一个 div 标签并为其设置 background 属性，而不是使用 <img> 元素。</p> <p>似乎额外的工作并没有起到任何作用，但实际上这更利于你对图片设置样式，保持它们原有的尺寸或者根据比例变化，这需要借助 background-size ， background-size 还有一些其它的属性。</p> <pre> <code class="language-css"><section> <p>Img element</p> <img src="" alt="bicycle"> </section> <section> <p>Div with background image</p> <div></div> </section> img { width: 300px; height: 200px; } div { width: 300px; height: 200px; background: url(''); background-position: center center; background-size: cover; } section{ float: left; margin: 15px; }</code></pre> <p>这种技术的一个缺点是你页面的可访问性可能略有打击，因为你的图片不会被屏幕阅读器和引擎正确抓取。 这个问题可以被 <a href="/misc/goto?guid=4959714687599663919" rel="nofollow,noindex">object-fit</a> 解决，但它还不被所有浏览器支持。</p> <h3><strong>6. 更好的 Table 边框</strong></h3> <p>HTML 中的 table 没什么意思。它们非常古怪，难以设计成响应式的，而且很难与整体风格一致。比如说，你想为 table 和其中的元素添加上边框，你可能会得到下面的结果。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fc2a65f0a4d6456a798406da78476675.png"></p> <p>正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table .</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ed745dc4b760512439fe51b36b61d9fd.png"></p> <p>这样看起来就好多了。</p> <h3><strong>7. 更好的注释方式</strong></h3> <p>CSS 可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！</p> <p>对于 CSS 中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。</p> <pre> <code class="language-css">/*--------------- #Header ---------------*/ header { } header nav { } /*--------------- #Slideshow ---------------*/ .slideshow { }</code></pre> <p>设计中的一些细节或那些不是特别重要的模块，可以用单行注释。</p> <pre> <code class="language-css">/* Footer Buttons */ .footer button { } .footer button:hover { }</code></pre> <p>另外，值得注意的是， CSS 中没有 // 注释，所以当你需要注释的时候你需要使用 /* */ 符号。</p> <pre> <code class="language-css">/* Do */ p { padding: 15px; /*border: 1px solid #222;*/ } /* Don't */ p { padding: 15px; // border: 1px solid #222; }</code></pre> <h3><strong>8. 命名连接</strong></h3> <p>当 class 或者 id 不止一个单词的时候，需要使用 - 符号连接， CSS 对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认约定。</p> <pre> <code class="language-css">/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }</code></pre> <h3><strong>9. 不要重复设置</strong></h3> <p>CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点，你不需要为页面中的每一个元素设置该属性。</p> <p>你只需要为 <html> 或者 <body> 设置 font 样式，然后让它一级一级流传下去就可以了。 下面是一个很好的例子。</p> <pre> <code class="language-css">html { font: normal 16px/1.4 sans-serif; }</code></pre> <p>当然，在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。</p> <h3><strong>10. CSS 动画与变换</strong></h3> <p>不要通过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom 。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。</p> <p>下面是一个例子，我们想动画一个 ball ，让它往右滑动。 不要去改变 left 的值，最好是使用 translateX() 。</p> <pre> <code class="language-css">.ball { left: 50px; transition: 0.4s ease-out; } /* Not Cool*/ .ball.slide-out { left: 500px; } /* Cool*/ .ball.slide-out { transform: translateX(450px); }</code></pre> <p>transform 以及它的所有方法（ translate, rotate, scale 等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。</p> <h3><strong>11. 不要 DIY, 使用库</strong></h3> <p>CSS 社区非常的庞大而且不断出现新的库。 库被提供于各种用途，从小片段到完善的框架，用于构建响应式程序，而且它们当中大部分都是开源的。</p> <p>所以下次当你碰到 CSS 问题的时候，在你想自己动手去解决问题的时候，最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。</p> <h3><strong>12. 保持选择器的特指度低</strong></h3> <p>不是所有 CSS 选择器都是生而相等的，当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。 但是事情并不总像我们想的那样，就像下面这个例子：</p> <pre> <code class="language-css">a{ color: #fff; padding: 15px; } a#blue-btn { background-color: blue; } a.active { background-color: red; }</code></pre> <p>我们想为所有按钮添加 .active 类使其变为红色，但这是不起作用的，因为按钮已经被一个 id 选择器设置了 background-color ，而 id 选择器具有更高的特指度。它们之间的规则就像下面这样：</p> <p>ID ( #id ) > Class ( .class ) > Type (比如 header )。</p> <p>特指度是可以堆叠的，所以 a#button.active 的特指度是高于 a#button 的。 使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器，这将最终导致 !important 效果。</p> <h3><strong>13. 不要使用 !important</strong></h3> <p>很认真的告诉你，不要使用 !important 。 即时的一个快速修复在将来可能导致大量的重写。相反，找出你 CSS 选择器不工作的原因，并且尝试去修复它。</p> <p>只有在一种情景中使用 !important 是可以接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议停止使用。</p> <h3><strong>14. 使用 text-transform</strong></h3> <p>在 HTML 中，当你使用大写字母的时候可能是出于某种语义目的，比如说你想强调一个单词的重要性。</p> <pre> <code class="language-css"><h3>Employees MUST wear a helmet!</h3></code></pre> <p>如果出于某种目的你将一组文本都设置成大写，可以在 HTML 中正常书写文本，然后利用 CSS 转换其大小写。 它们看起来都是一样的，但是如果不在上下文中，你的内容将更有意义。</p> <pre> <code class="language-css"><div class="movie-poster">Star Wars: The Force Awakens</div> .movie-poster { text-transform: uppercase;}</code></pre> <p>这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。</p> <h3><strong>15. Em， Rem 和 Pixel</strong></h3> <p>人们在对元素和文本设置尺寸应该用 em ， rem 还是 px 有很多的争论。事实是，这三者都是可行的，有自己的优点和缺点。</p> <p>所有的开发者和项目都是不同的，所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法：</p> <ul> <li> <p>em - 1 em 的大小与直接父元素的字体大小有关。 通常用于媒体查询， em 对响应式设计而言是非常棒的 ，但是将每个元素的 em 值转换为 px 的比例是非常难以计算的，因为你可能要在 DOM 树上逐级跟踪元素。</p> </li> <li> <p>rem - 以 <html> 元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持 <html> 中默认的 font-size 并且为其它的元素设置 rem 是一种非常棒的方法。</p> </li> <li> <p>px - 像素是最精确的控制方式，但是在 响应式设计中它并不友好，因为它不会随屏幕大小变化而自动缩放。它们是可靠的，易于理解的，并且在值和实际结果之间呈现出良好的视觉联系。</p> </li> </ul> <p>下面我要说的是，不要害怕尝试。去使用它们并且找出哪一种是你最喜欢的。 有时候 em 和 rem 很省事，尤其对于响应式界面。</p> <h3><strong>16. 在大项目中使用预处理器</strong></h3> <p>你可能已经听说过它们了 - Sass , Less , PostCSS , Stylus 。预处理器是 CSS 发展的下一阶段。 它们提供的功能诸如变量， CSS 函数，选择器嵌套以及其它一些非常酷的东西。这使得 CSS 代码非常易于管理，尤其在大项目中。</p> <p>举个简单的例子，下面是使用了 CSS 变量和函数的 Sass 代码片段。</p> <pre> <code class="language-css">$accent-color: #2196F3; a { padding: 10px 15px; background-color: $accent-color; } a:hover { background-color: darken($accent-color,10%); }</code></pre> <p>使用 CSS 预处理器的唯一缺点是，它们需要编译成真正的 CSS 代码，但是如果你已经决定在你的项目中使用一个构建脚本，那么这就不再是你应该烦恼的问题了。</p> <p>如果你想了解更多关于预处理器的知识，请查看目前最受欢迎的两个系统的教程 - Sass 和 Less .</p> <h3><strong>17. Autoprefixers</strong></h3> <p>为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远无法精确的你需要哪一个，而且如果你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。</p> <p>感谢上天，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器 ：</p> <ul> <li>在线工具： Autoprefixer</li> <li>文本编辑器插件 - Sublime Text , Atom</li> <li>库 - Autoprefixer</li> </ul> <h3><strong>18. 在项目中使用精简代码</strong></h3> <p>为了提高网站或 app 的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.</p> <p>有很多不同的方法去精简 CSS 代码 :</p> <ul> <li>在线工具 - CSS Minifier , CSS Compressor</li> <li>文本编辑插件 - Sublime Text , Atom</li> <li>库 - Minfiy , CSSO 和 CSSNano</li> </ul> <p>根据你的工作流程,你可以选用上述一个选项,但是建议你总是使用某种方式自动执行此过程.</p> <h3><strong>19. Can I Use</strong></h3> <p>不同的浏览器仍然存在着很多不一致的兼容性问题, 利用 caniuse 或者其它类似的服务检测你正在使用的属性是否被广泛支持, 是否需要添加前缀, 或者说是否会在某平台下出现 bug .</p> <p>仅仅检测是否仍然是不够的, 你仍然需要测试布局是否会无缘无故的崩溃. 充分了解用户经常使用的浏览器也会提供很大的帮助, 因此你可以看到好的支持是非常关键的.</p> <h3><strong>20. Validate</strong></h3> <p>验证 CSS 代码可能没有验证 HTML 或者 JavaScript 代码重要, 但是在一个 CSS 验证器上运行你的代码还是有帮助的, 它会提示你是否书写了错误或者比较糟糕的代码, 甚至会给出一些比较中肯的建议帮助你改进代码.</p> <p>有很多的工具可以完成这一工作.</p> <ul> <li> <p>在线工具 - W3 Validator , CSS Lint</p> </li> <li> <p>文本编辑器插件 - Sublime Text , Atom</p> </li> <li> <p>库 - stylelint (Node.js, PostCSS), css-validator (Node.js)</p> </li> </ul> <p> </p> <p>来自：http://www.jianshu.com/p/7a4947e12b85</p> <p> </p>