CSS书写与命名

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

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

遵守的原则

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

语义化命名

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

书写顺序

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

    OOCSS

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

  • 减少对 HTML 结构的依赖
  • 增加 CSS class 重复性的使用
    就是将原先的样式进行提纯，使用class封装，通过增加class增加复用性。Bootstrap使用的也是这种方式。

MSACSS

BEM

MVCSS

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-write-and-name.html