20个编写现代CSS代码的建议

01、明白何谓Margin Collapse

不同于其余很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:

在上述例子中我们会发现，红色和蓝色方块的外边距并没有相加得到70px，而是只有红色的下外边距保留了下来。我们可以使用少量方法来避免这种行为，不过建议来说还是尽量统一使用margin-bottom属性，这样就显得和谐多了。

02、使用Flexbox进行布局

在传统的布局中我们习惯使用Floats或者者inline-blocks，不过它们更适合于格式化文档，而不是整个网站。而Flexbox则是专门的用于进行布局的工具。Flexbox模型允许开发者使用很多便捷可扩展的属性来进行布局，预计你一旦用上就舍不得了:

03、使用css Reset

尽管这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的情况有所改善，但是在不同的浏览器之间依然存在着很多的行为差异。

而处理这种问题的最好的办法就是使用某个css Reset来为所有的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工作。

目前流行的Reset库有normalize.css, minireset以及 ress，它们都可以修正很多已知的浏览器之间的差异性。而假如你不打算用某个外在的库，那么建议可以使用如下的基本规则:

上面的规则看起来没啥用，不过假如不同的浏览器在默认情况下为你设置了不同的外边距/内边距的默认值，还是会挺麻烦的。

04、一切应为Border-box

尽管很多初学者并不理解box-sizing这个属性，但是它的确相当的重要。而最好的了解它的方式就是看看它的两种取值:

默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加，譬如某个<div>标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。

border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的<div>无论其内边距或者者边长设置为多少，其占有的大小都是100px。

将元素设置为border-box会很方便你进行样式布局，这样的话你即可以在父元素设置高宽限制而不担心子元素的内边距或者者边打破了这种限制。

05、以背景图方式使用Images

假如需要在响应式的环境下展现图片，有个简单的小技巧就是使用该图片作为某个<div>的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者者其余相似的工具抓取到，有个不错的属性叫object-fit可以处理这个问题，不过该属性目前的浏览器支持并不是很完善。

06、Better Table Borders

html中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，假如你打算为Table的边与单元的边增加样式，可能得到的结果如下:

07、注释格式优化

CSS尽管谈不上一门编程语言但是其依然需要增加注释以保障整体代码的可读性，只需增加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者者未来的自己更好地了解。对于CSS中整块的注释或者者使用在Media-Query中的注释，建议是使用如下形式：

而设计的细节说明或者者少量不重要的组件可以用如下单行注释的方式:

同时，不要忘了CSS中是没有//这种注释方式的:

08、使用Kebab-case命名变量

对于样式类名或者者ID名的命名都需要在多个单词之间增加-符号，CSS本身是大小写不敏感的因而你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-:

而涉及到具体的变量命名规范时，建议是使用BEM规范，只需遵循少量简单的准则就可以保证基于组件风格的命名一致性。你也可以参考CSS Tricks来取得更多的细节形容。

09、避免重复代码

大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因而我们并不需要再单独地为元素设置该属性。我们只要要在html或者者body中增加该属性而后使其层次传递下去就可:

10、使用transform增加CSS Animations

不建议直接改变元素的width与height属性或者者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:

Transform的几个属性translate、rotate、scale都具备比较好的浏览器兼容性可以放心使用。

11、不要重复造轮子

现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们处理从小的代码片到用于构建完整的响应式应用的全框架。所以假如下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者者CodePen上搜索可行方案。

12、尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写一律的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

我们原本希望将.active类增加到按钮上而后使其显示为红色，不过在上面这个例子中很显著起不了作用，由于button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。

一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

13、避免使用!important

认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的。

14、使用text-transform属性设置文本大写

15、Em, Rem, 以及 Pixel

已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的探讨，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因而并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:

em – 其基本单位即为当前元素的font-size值，经常适用于media-queries中，em是特别适用于响应式开发中。

rem – 其是相对于html属性的单位，可以保证文本段落真正的响应式尺寸特性。

px – Pixels 并没有任何的动态扩展性，它们往往用于形容绝对单位，并且可以在设置值与最终的显示效果之间保留肯定的一致性。

16、在大型项目中使用预解决器

预计你一定听说过Sass, Less, PostCSS, Stylus这些预解决器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其余的特性，这里我们以Sass为例:

在前台领域混了这几年，总结了一套前台学习的精讲视频和学习路线，假如有对前台开发感兴趣的伙伴，不论你是想转行，或者是大学生，还有工作中想提升自己能力的web前台党，欢迎大家的加入我的前台开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前台技术!也可以关注我的微信公众号：【前台留学生】 每天升级最新技术文章干货。

17、使用Autoprefixers来提升浏览器兼容性

使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸好现在也是有很多工具可以辅助我们进行这样的开发:

Online tools: Autoprefixer

Text editor plugins: Sublime Text, Atom

Libraries: Autoprefixer (PostCSS)

18、在生产环境下使用Minified代码

为了提升页面的加载速度，在生产环境下我们应该默认使用压缩之后的资源代码。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。当然，经过压缩之后的代码毫无可读性，因而在开发阶段我们还是应该使用普通的版本。对于CSS的压缩有很多的现行工具:

Online tools – CSS Minifier (API included), CSS Compressor

Text editor plugins: Sublime Text, Atom

Libraries: Minfiy (php), CSSO and CSSNano (PostCSS, Grunt, Gulp)

选择哪个工具一定是依赖于你自己的工作流啦~

19、多参阅Caniuse

不同的浏览器在兼容性上差异很大，因而假如我们可以针对我们所需要适配的浏览器，在caniuse上我们可以查询某个特性的浏览器版本适配性，能否需要增加特定的前缀或者者在某个平台上能否存在Bug等等。不过光光使用caniuse一定是不够的，我们还需要使用些额外的服务来进行检测。

20、Validate:校验

对于CSS的校验可能不如HTML校验或者者JavaScript校验那么重要，不过在正式发布之前用Lint工具校验一波你的CSS代码还是很有意义的。它会告诉你代码中潜在的错误，提醒你少量不符合最佳实践的代码以及给你少量提升代码性能的建议。