你的位置:首页 > 软件开发 > 网页设计 > CSS通用编码规范

CSS通用编码规范

发布时间:2016-03-22 18:00:04
CSS通用编码规范 总结一部分前端编码规范,CSS部分先奉上,大多比较通用,应该是主流方式吧。 1 前言本文档的目标是使 CSS 代码在团队中风格保持一致,容易被理解和被维护。尽管本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译器(如 less、sass、s ...

CSS通用编码规范

 

总结一部分前端编码规范,CSS部分先奉上,大多比较通用,应该是主流方式吧。

 

1 前言

本文档的目标是使 CSS 代码在团队中风格保持一致,容易被理解和被维护。

尽管本文档是针对 CSS 设计的,但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时,适用的部分也应尽量遵循本文档的约定。

 

2 CSS命名方式

  • 保持 class 命名为全小写,可以使用短划线(不要使用下划线和 camelCase 驼峰式命名)
  • 短划线应该作为相关类的自然间断。(例如,.btn 和 .btn-blue)。
  • 避免过度使用简写。.btn 可以很好地描述 button,但是 .t 不能代表任何元素。
  • class 的命名应该尽量短,也要尽量明确。
  • 使用有意义的名称;使用结构化或者作用目标相关,而不是抽象的名称。
  • 全局通用命名时,需要加特定前缀如 `zk-wrap`
  • 局部命名时,可以根据模块内容或就近父节点为前缀

 

3 CSS基础设施

  • 编码格式:文件编码格式 `UTF-8` 编码,在CSS文件顶格位置申明文档的编码charset
 @charset "utf-8";

4 编码风格

  • 缩进方式:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
  • 空格

    • 选择器 与 { 之间必须包含空格。
    • 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
    • 列表型属性值 书写在单行时,, 后必须跟一个空格。
  • 选择器

    • 如无必要,不得为 idclass 选择器添加类型选择器进行限定。
    • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确
    • >+~ 选择器的两边各保留一个空格。
  • 属性

    • 属性定义必须另起一行。
    • 属性定义后必须以分号结尾。
    • 在可以使用缩写的情况下,尽量使用属性缩写。
    • 属性前缀,标准属性放在最后,按冒号对齐方便阅读,也便于在编辑器内进行多行编辑。

      .box {-webkit-box-sizing: border-box;  -moz-box-sizing: border-box;    box-sizing: border-box;}
  • 属性书写顺序: 位置 > 盒模型 > 排版 > 外观 > 其它

    • Positioning 位置

      // 包括 float、display、overflow……position: absolute;top: 50px;left: 0;overflow-x: hidden;
    • Box model 盒模型

      border: 1px solid #000margin: 20px;padding: 15px;width: 240px;height: 160px; 
    • Typographic 排版

      font-size: 16px;line-height: 32px;text-align: left;word-wrap: break-word
    • Visual 外观

      background: #fff url(images/logo.png) no-repeat;color: #000;
  • 清除浮动

    原标题:CSS通用编码规范

    关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。