CSS你能够不写，但这些规范必需要知道！

前端技术栈的日益丰富，各位媛兄更多的是把技术专一点放在了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上有更好的体验，建议移动版优先。

---

不可以使用html tag selector

• 请直接定义class的样式，不须要指定html tag。

---

层级不能够超过三层

• 超过三层表示耦合度过高，不具备弹性、可维护性。

---

用同样的element时不要把一堆东西所有写在里面，请把排版相关的独立出来

• 把border-radius写在img上面，请把img保持干净。定位，例如position: absolute;

---

不要随意none掉画面上的tag或行为

• 请注意若是要none掉一些样式，请依照使用程度决定。

• 使用程度遍及整个网站，请直接使用reset.css

• 使用程度中等如下，请定义一个class

---

reset.css

• 常见的a tag不要有underline

• list消除原有样式

• 请在reset.css上定义，而且设为第一载入次序

---

有JavaScript行为的class能够为命名加入name space

#js-project-show {}
复制代码

---

请勿任意使用br hr tag

• br是换行，请使用在p tag里面，当p里面文字过多时可使用。
• hr是快速划线，可是即将被淘汰，请直接使用border写在class里面。
• br必须去思考父区块是否是display: block;，若是要换行，应该思考是否是下一段文字。
• 线条请都是用border去写。

---

关注更多高质量精彩技术文章，请关注公众号：前端社

专业的前端开发者社区，天天推送一篇高质量技术文章，与 20000+ 前端大牛共成长