WEB前端CSS样式书写规范

WEB前端CSS样式书写规范

为什么要规范书写代码？

很多新手在书写前端代码的时候，往往会忽略一些代码书写的问题，导致写出的代码，可维护性差，代码冗余等等问题。那么如何才能好的CSS样式，下面给大家讲几个CSS代码书写技巧，以及企业级开发的一些标准。

css的代码书写顺序

没错CSS样式也是有书写顺序的，因为涉及到一个浏览器渲染流程的问题，就一个盒子模型来说，浏览器首先确定元素类型在确定位置以此类推。一旦书写错误，就会导致一系列渲染上面的问题。所以说一定要注意这一块。

/*      这些属性只是最常用到的,并不代表全部    */
/***   布局定位属性  ***/
content  /  display / list-style / position(相应的方位值 top,bottom,left,right)/ float / clear / visibility / overflow
/***   自身属性     ***/
width / height / margin / padding / border / background
/***   文本属性     ***/
color / font /  text-decoration / text-align / vertical-align / white- space / word-break
/***  其它css3属性  ***/
cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

css代码的行为规范

不要以完全没有语义的标签作为选择器,这会造成大面积污染
除非你可以断定现在或将来你的这个选择器不会污染其他同类

/* 不推荐 */
.m-xxx div{ ... }

简写css颜色属性值

十六进制颜色书写方法是可以简写的，作为一个有追求的程序员，在保证代码结构，以及可维护性的前提下，尽可能减少文本文件的体积。当然从一个层面上来说也可以提升渲染速度。

/* 不推荐 */
.box{ color:#000000; background-color:#ddeeff;}
/* 推荐 */
.box{ color:#000; background-color:#def;}

删除css属性值为0的单位

0就是0，任何单位都不需要,只要前面的数值为0,后面的单位都可以去掉 .

/* 不推荐 */
.box{ margin:0px; padding:0px;}
/* 推荐 */
.box{ margin:0; padding:0;}

删除无用CSS样式

第一，删除无用的样式后可以减少整个网页文档的体积，提升网页的加载速度；第二，对于浏览器而言，所有的样式规则的都会被浏览器检索并且解析，即使是当前页面没有匹配的样式规则 , 浏览器也会进行检索和解析 , 所以如果去除了没有匹配的样式规则，就能够减少浏览器的索引项 ，加快浏览器的检索速度。

/* 不推荐 */
.box{ font-size:12px;}
.nav{}
.nav-item{ height:20px;}
/* 推荐 */
.box{ font-size:12px;}
.nav-item{ height:20px;}

css属性值需要用到引号时，统一使用单引号

/* 不推荐 */
.box{ font-family:"\5FAE\8F6F\96C5\9ED1";}
/* 推荐 */
.box{ font-family:'\5FAE\8F6F\96C5\9ED1';}

为单个css选择器或新申明开启新行

这些就是书写代码的一个习惯的问题，不要一串类名写在一行给你你写多了能看出来不？

/* 不推荐 */
.home-count .hd,.content-title,.select-game-title .title{}.nav{}
/* 推荐 */
.home-count .hd,
.content-title,
.select-game-title .title{}
.nav{}

css代码的命名规范

以字母开头
1.必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
2.不允许单个字母的类选择器出现；
3.不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
全小写，并使用 ’ - ’ 连字符
1.下划线 ’ _ ’ 禁止出现在class命名中，统一使用’-‘连字符
2.禁止驼峰式命名,备注驼峰命名在js的命名中是允许的
3.不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
命名应简约而不失语义
1.避免过度简写 , .ico足够表示这是一个图标 , 而.i不代表任何意思
2.使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称

对前端学习感兴趣可以看我简介一起学习前端