CSS（全称 Cascading Style Sheets，层叠样式表）为开发人员提供申明式的款式语言，是前端必备的技能之一，基于互联网上全面的材料和简略易懂的语法，CSS 十分易于学习，但其知识点宽泛且扩散，很难做到精通，在咱们日常开发中，经常漠视了 CSS 代码的品质，很容易写出横七竖八的 CSS 文件。
代码优化倡议
1. 应用缩写属性精简代码
实用于：margin、padding、border、font、background 等
但并非所有状况下都必须缩写，因为当一个属性的值缩写时，总是会将所有项都设置一遍，而有时候咱们不心愿设置值里的某些项，这时候须要开发者自行判断。
.content{ // 缩写前 margin-right:16px; margin-top:30px; width:184px; height:32px; background:#FFFFFF margin-left:10px;}.content{ //缩写后 margin:30px 16px 0 10px; width:184px; height:32px; background:#FFFFFF}2. 合并选择器
应用 "," 连贯多个选择器定义专用属性，不仅能减少可读性，还能减小 css 文件大小。
.content{ display: flex; .flush, .include, .underline{ margin-right: 12px; padding: 3px 6px; border: 1px solid #a96161; font-size: 12px; color: #412c2c; } .flush{ color: #FFFFFF; background-color: aqua; } .include{ color: #5d3e3e; background-color: #657f7f; } .underline{ color: #7da938; background-color: #7c6a6a; }}3. 应用更语义化的单词命名 class
命名的时候以 “在你之后开发的人不会产生纳闷” 为指标 如下
.curr{ color:#FFFFFF; background:red;}.future{ background:#9f6262;}// curr 是啥? future又是啥? ⬆️.current-count{ color:#FFFFFF; background:red; } .future-count{ background:#9f6262; }4. 属性申明程序
选择器中属性数量较多时，将相干的属性申明放在一起，并按以下顺序排列：
- 定位相干，如 position、top/bottom/left/right、z-index 等
- 盒模型相干，如 display、float、margin、width/height 等
- 排版相干，如 font、color、line-height 等
- 可视相干，如 background、color 等
- 其余，如 opacity、animation 等
倡议：在属性数量较多时能够参考这 5 个类别归类排列。
/* 定位相干 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* 盒模型相干 */ display: block; float: right; width: 100px; height: 100px; /* 排版相干 */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* 可视相干 */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* 其余 */ opacity: 1;5. 应用 & 符号援用父选择器
& 是 Sass 和 Less 中提供的语法糖，用于示意对父选择器的援用
长处：非常适合用于编写组件的款式，缩小了很多反复单词
毛病：从 HTML 的 class name 中寻找对应款式的成本增加
.first { .first-title {/* styles */} .first-title:after {/* styles */} .first-content {/* styles */}}/* 用&援用来优化代码 */.first { &-title { /* styles */ &:after {/* styles */} } &-content {/* styles */}}Sass .vs. Less？
预处理器将 CSS 从申明语言转换成一门编程语言
可嵌套的语法减少了款式文件的可读性和可维护性
变量与混合个性可能缩小很多反复的款式申明
Less 更像 CSS，易于上手，可能从 CSS 平滑过渡；Sass 的缩进语法接受度因人而异，Sass3.0 中提出了兼容 CSS 的 Scss，用户能够抉择应用 Sass 或 Scss。
当我的项目 CSS 中须要波及简单逻辑时，Sass/Scss 更适宜，Sass 提供了更弱小、更靠近编程语言的 @function、@if/@else、@while 等语法；当我的项目的款式复杂度不高时，选 Sass 或 Less 都能够。 （上面是一个 Less 和 Scss 语法比照例子）
// Less.mixin( @count )when( @count > 0 ){ background-color: black;}.mixin( @count )when( @count <= 0 ){ background-color: white;}.tag { .mixin(100);}// Scss@function selectCount($count) { @if $count > 0 { return black; } @else { return white; }}.tag { background-color: checkCount(100);}综上，CSS 作为一门前端必备的根底技能，具备许多原生的痛点。近年来，开发者们也在源源不断地提出了不同的优化计划，咱们在日常关注 Vue、React、NodeJS、性能优化等热门前端话题的时候，也不要忘了好好写 CSS 代码呀～
内容起源：京东云开发者社区 [https://www.jdcloud.com/]