[TOC]
  • CSS书写与命名遵守的原则语义化命名书写顺序OOCSSMSACSSBEMMVCSS参考资料

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

参考资料

  • CSS样式名中的下划线与连字符
  • 推荐大家使用的CSS书写规范、顺序
  • 精简高效的CSS命名准则/方法
  • CSS命名神马的真心难
  • div+css命名方式
  • NEC: css命名方式
  • BEM —— 源自Yandex的CSS 命名方法论
  • BEM
  • CSS设计模式：OOCSS 和 SMACSS
  • OOCSS——概念篇
  • MVCSS中文文件

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