携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

痛点

很多开发者认为css是最简单的一部分，所以大多数人对于书写样式都是凭借着感觉自上而下堆砌，当界面缺少相应的样式时再堆砌上去，这样的后果是往往是造成样式代码在直观上“一坨一坨”的，缺乏观赏性。

  content: '';
  height: 18px;
  display: block;
  width: 2px;
  background-color: red;
  position: absolute;
  left: 0px;

例如上面的样式，会让人感觉很凌乱，当想要确定该样式的布局信息时，需要自上而下认真查找。

我们希望的是即使样式是“一坨一坨”的，但是能从相邻的样式信息以及大概位置，确定所处的分层信息，即分层确定布局、属性、字体等。

而对于大多数人来说，往往也会因为不确定是否用到预期的属性之后导致属性覆盖等情况，即出现多次同一属性。

// 想要更改字体颜色，但是不知道color是不是因为继承
top:10px;
right:30px;
width:500px;
color:red;
height:200px;
content:'';
background-color:green;
display:flex;
color：blue; // 不确定字体颜色是不是因为继承而来的，所以添加该color。

解决方案

搜索网上关于css书写的顺序，大多数建议是遵循分层信息，自上而下书写：

1. 定位属性：display、position、float、left、top、right、bottom、overflow、visibility、clear、z-index等。
2. 自身属性：margin、border、padding、width、height、content、background（盒模型）。
3. 文字样式：color、font-相关属性，如font-family、font-size等。
4. 文本属性：决定文字排版顺序等，如text-decoration、text-aligin、vertical-align、text-wrap、white-space、break-word等。
5. css3新增属性：cursor、border-radius、box-shadow、border-radius、transform等。

书写顺序主要遵循下列原则：定位属性、自身属性、文字样式、文本属性、css3新增属性等层次信息书写。

其他样式书写推荐

1. 尽量使用样式缩写。
2. 去掉小数点前的0。
3. 使用类名选择器代替其他选择器。
4. 在使用样式预编译器时，嵌套的层级不宜过深，尽量控制在3-5层之间。
5. 减少import使用。

类的命名

命名是一门学问，关于类的命名，除了兼具语义化之外，还可以由一定的规则组成方式去命名。

1.BEM：块（block）-元素（element）-修饰符（modifier）。

2.小驼峰：css module里常用。

BEM由于是符号分割，无论是短横杠还是下划线，在css module里并不适用，所以在css module里更多的是采用小驼峰。

命名的关键也在于单词的选取，推荐下列常用名词去组合：

page
wrap
container
layout
header
footer
content
menu
nav
main
submain
sidebar
logo
banner
title
icon
note
button
txt
block
window
tip

无论是采取那种方式，最重要的还是团队达成共同意识。

小结

本篇我们主要介绍css书写顺序，根据大多数线上资料以及社区认同，普遍认为可以从其布局信息、自身属性（盒模型）、文字样式、文字属性以及css3新增样式的结构，自上而下书写css样式。

其次还推荐了一些关于样式的书写规范，良好的书写规范才能使人身心愉悦。