命名规则说明

所有的命名最好都小写
属性的值一定要用双引号(“”)括起来，且一定要有值如class=”app”,id=”app”
每个标签都要有开始和结束，且要有正确的层次，排版有规律工整例如：< div ></ div >
空元素要有结束的tag或于开始的tag后加上”/” < br / >、< img / >
表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
< h1 >到< h6 >的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询,因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
给图片加上alt标签,alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器。

样式属性顺序

定位：position z-index left right top bottom clip等。
自身属性：width height min-height max-height min-width max-width等。
文字样式：color font-size letter-spacing, color text-align等。
背景：background-image border等。
文本属性: text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow等。
css3中属性：content、box-shadow、animation、border-radius、transform等。

/* yes */                             /* no */
.example {                            .example {   
  z-index: -1;                          color: red;
  display: inline-block;                background-color: #eee;
  font-size: 16px;                      display: inline-block;
  color: red;                           z-index: -1;
  background-color: #eee;               font-size: 16px;
}                                     }
复制代码

css样式书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
截屏2021-05-07 下午4.04.58.png
去掉小数点前的“0”
截屏2021-05-07 下午4.05.18.png
简写命名(前提是要让人看懂你的命名才能简写哦)
截屏2021-05-07 下午4.06.55.png
16进制颜色代码缩写
截屏2021-05-07 下午4.07.17.png
连字符CSS选择器命名规范