CSS你可以不写，但这些规范必须要知道！-CSDN博客

前端开发者多专注于JavaScript与框架，对CSS探究较少。文章介绍了CSS代码的规范，包括样式命名不缩写、避免随意限定宽高、优先用grid排版、设计RWD网站遵循移动优先原则、控制层级等，有助于提升代码可维护性。

前端技术栈的日益丰富，各位媛兄更多的是把技术专注点放在了JavaScript与框架上，对CSS有深入探究的少之又少，不知道别的公司什么样，我们部门关于写HTML+CSS的，直接就会丢给公司的实习生来完成，写的说不上好，但也不算差，没有什么亮点，而且CSS写的也不是那么规范，很不利于后期的维护与修改，今天我们就来聊一聊CSS代码上的一些规范，你可以不亲自去写CSS，但是在指导新人的时候还能装一把大牛不是。

对样式命名的时候不要缩写

精简扼要地对class命名，请勿使用自定义缩写。
class name的命名必须是行为、有语意的。

禁止在非特殊情况下写`！important`

CSS本身有权重设计，任意地使用!important会造成权重混乱而无法维护。

不可轻易限定宽高

用户可以自行设定自己的浏览器，例如Android手机可以设定显示字体大小，写死的高度会让字体相互重叠。

RWD失效

移动设备的高度是无限的，宽度是有限的。
请不要把宽写死。

`img`请让它自动缩放

请不要替img的容器设定宽或高，让它根据设备自行缩放。请使用bootstrap的img-responsive。如果确实要用：

  width: 100%;
  height: auto;
复制代码

如果要给img border-radius设定样式，请使用父元素控制行为，保持img只载入图片，没有样式。

优先使用grid排版

请不要花很多时间在写media query，设定一堆breakpoint，自己写组件样式，自己控制每种设备上的容器宽度。
请使用grid system，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。

不可直接`over write`或在原本框架的`class`增加内容

直接写一个新的class，不要覆盖原有的设计。
不要再已有的class上添加样式，请额外单独写一个。

设计RWD网站，请遵循移动设备优先原则

设计师的设计顺序，以桌面版优先，再设计手机版。
前端工程师拿到视觉图，开始写HTML/CSS时以手机版为第一优先。
手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先，可以让HTML一开始载入，使用最少的效能快速载入网页。当开始制作桌面版时，只会少许跑版，做适当微调即可。
相反，如果先制作桌面版，当手机版画面被切掉或是跑版，需要花更多时间去调整。
再来是iPhone手机的retina，会将图片放到手机上时自动做两倍缩小，在一开始制作时即可发现图片载入是否吃效能。为了让图片能在iPhone上有更好的体验，建议移动版优先。