- em – 其根本单位即为当前元素的font-size值，经常实用于media-queries中，em是特别实用于响应式开辟中。
- rem – 其是相对于html属性的单位，可以包管文本段履┞锋正的响应式尺寸特点。
- px – Pixels 并没有任何的动态扩大性，它们往往用于描述绝对单位，并且可以在设置值与最终的显示效不雅之间保存必定的一致性。
在大年夜型项目中应用预处理器
估计你肯定据说过 Sass, Less, PostCSS, Stylus这些预处理器与对应的语法。Preprocessors可以许可我们将将来的CSS特点应用在当前的代码开辟中，譬如变量支撑、函数、嵌套式的选择器以及很多其他的特点，这里我们以Sass为例:
- /* Footer Buttons */ .footer button { }
- .footer button:hover { }
- $accent-color: #2196F3;
- a {
- padding: 10px 15px;
- background-color: $accent-color;
- }
- a:hover {
- background-color: darken($accent-color,10%);
- }
应用Autoprefixers来晋升浏览器兼容性
应用特定的浏览器前缀是CSS开辟中常见的工作之一，不合的浏览器、不合的属性对于前缀的请求也不一样，这就使得我们无法在编码过程中记居处有的前缀规矩。并且在写样式代码的时刻还须要加上特定的浏览器前缀支撑也是个麻烦活，亏得如今也是有很多对象可以帮助我们进行如许的开辟:
- Online tools: Autoprefixer
- Text editor plugins: Sublime Text, Atom
- Libraries: Autoprefixer (PostCSS)
在临盆情况下应用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)
选择哪个对象肯定是依附于你本身的工作流啦~
不合的浏览谱钥滏容性上差别很大年夜，是以如不雅我们可以针对我们所须要适配的浏览器，在caniuse上我们可以萌芽某个特点的浏览器版本适配性，是否须要添加特定的前缀或者在某个平台上是否存在Bug等等。不过光光应用caniuse肯定是不敷的，我们还须要应用些额外的办事来进行检测。
多参阅Caniuse
Validate:校验
对于CSS的校验可能不如HTML校验或者JavaScript校验那么重要，不过在正式宣布之前用Lint对象校验一波你的CSS代码照样很有意义的。它会告诉你代码中潜在的缺点，提示你一些不相符最佳实践的代码以及给你一些晋升代码机能的建议。就像Minifers与Autoprefixers，也有很多可用的对象:
- Online tools: W3 Validator, CSS Lint
- Text editor plugins: Sublime Text, Atom
- Libraries: stylelint (Node.js, PostCSS), css-validator (Node.js)
【编辑推荐】
- CSS进阶：尝尝酷炫的3D视角
- 纯HTML+CSS+JS编写的盘嗣孀应用
- CSS样式书写规范
- 若何只用CSS完成漂亮的加载
- CSS构造事业淫巧：各类居中
推荐阅读
如今，你买一部安卓手机，你还会Root吗?如今，你拥有一部可以逃狱的iPhone，你还会逃狱吗?曾几时，当我们拿到新智妙手机之后，都邑第一时光选择Root(逃狱)，然则如今我们可能不会那么做了>>>详细阅读
本文标题：编写现代CSS代码的20个建议
地址：http://www.17bianji.com/lsqh/36968.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示