Powered by GitBook

前端工程师手册

CSS书写与命名

开发过程最耗时的是什么？其实是命名。。。

每个团队都应该拥有一套开发规范，其中应该也包含了命名规范。对于CSS而言，命名的组织方式又有多种，下面我们一起看看。

遵守的原则

首先是命名要讲究简单而不失语义化，其次要时刻思考复用性，选择器的性能等。

语义化命名

这是较为传统的方式，就是div是干什么的，就起什么名字。这种方式好处是清晰明了，但是缺点是和HTML元素高度耦合。不利于大型项目的复用，比如起名都是按照组件的位置而定的情况。

书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align等)
  4. 背景(background, border等)
  5. 其他(animation, transition等)

OOCSS

一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个：

  • 减少对 HTML 结构的依赖
  • 增加 CSS class 重复性的使用

就是将原先的样式进行提纯，使用class封装，通过增加class增加复用性。Bootstrap使用的也是这种方式。

MSACSS

BEM

MVCSS

参考资料