前端开发规范[css篇]

css规范

协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改.

基本原则

  * 1. 自定义样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。

  样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”
  文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ”、“ .no12-24 ”

  * 2. 重新定义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }

  * 3. 链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。

  该样式写法有2种： 
    a.nav:link
    nav.a:link
  第一种只能修饰<a>标签中。
  第二种可以修饰所有包含有<a>标签的其他标签。

  * 4. 代码块内容缩进，它能够提高层次结构的清晰度。

@media screen, projection {
  html {
      background: #fff;
      color: #444;
  }
}

  * 5. 忽略浏览器的特定前缀排序，但多浏览器特定的某个CSS属性前缀应相对保持排序（例如-moz前缀在-webkit前面）。

  ...
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  ...

  * 6. 声明完结，所有声明都要用“;”结尾。

  /* not recommended */
  .test {
      display: block;
      height: 100px
  }
  /* recommended */
  .test {
      display: block;
      height: 100px;
  }

  * 7. 选择器和声明分行，每个选择器和声明都要独立新行。

  /* not recommended */
  a:focus, a:active {
      position: relative;
      top: 1px;
  }
  /* recommended */
  a:focus,
  a:active {
      position: relative;
      top: 1px;
  }

  * 8. 规则分行，每个规则独立一行，两个规则之间隔行。

    ...

    html {
      background: #fff;
      ...
    }

    body {
      margin: auto;
      width: 50%;
      ...
    }

  ...

编码规则

  * 1. 严禁特简化命名。
  * 2. ID和class的命名。

  > 为ID、Class 使用语义化、通用的命名方式
    * 只允许使用的小写字母、连字符、数字。
    * 应该从 ID 和 Class 的名字上就能看出这元素是干嘛用的（角色、功能、状态），而不是表象（颜色、位置等）或模糊不清的命名。
    * 应该优先虑以这元素具体目来进行命名，易于理解，且后期修改的可能性小。
    * 对与同级元素相比没有特殊的意义的元素使用通用的命名。
    * 使用功能性或通用的名字可以减少不必要的文档或模板修改。

  ...
    /* not recommended: 无意义 不易理解 */
    #yee-1901 {}

    /* not recommended: 表达不具体 */
    .button-green {}
    .clear {}

    /* recommended: 明确详细 */
    #gallery {}
    #login {}
    .video {}

    /* recommended: 通用 */
    .aux {}
    .alt {}
  ...

  * 3. 非必要的情况下，ID和class的名称应尽量简短。

  ...
    /* not recommended */
    #navigation {}
    .atr {}

    /* recommended */
    #nav {}
    .author {}
  ...

  * 4. 简要传达ID或class是关于什么的。
    > 不要驼峰命名法和下划线。
    > 选择器前面加上特殊应用标识的前缀（可选)。
    > 大型项目中最好在ID或class名字前加上这种标识性前缀（命名空间），使用短破折号链接。
    > 使用命名空间可以防止命名冲突，方便维护，比如在搜索和替换操作上。
    > ID和class名字有多单词组合的用短破折号“-”分开。

  ...
    /* not recommended */
      .demoimage {}
      .error_status {}
      .errorStatus {}

    /* recommended */
      #video-id {}
      .ads-sample {}
  ...

  * 5. 通过这种方式，似的代码易懂且高效。
  * 6. 避免元素选择器和 ID、Class 叠加使用
  * 7. 非必要的情况下不要使用元素标签名和ID或class进行组合【影响性能】。
  * 8. 考虑避免使用父辈节点做选择器 performance reasons【影响性能】。

  ...
    /* not recommended */
      ul#example {}
      div.error {}

    /* recommended */
      #example {}
      .error {}
  ...

  * 9. 属性值为 0 时省略单位。

  ...
    /* not recommended */
      padding: 0px;

    /* recommended */
      padding: 0;
  ...

  * 10. 使用rem作为字号、长度单位。

  > 使用 px对可访性会造成一定的问题，em 则随着上下文不断变化，计算较为繁杂。
    * 推荐使用 rem：[Font sizing with rem](https://snook.ca/archives/html_and_css/font-size-with-rem)。
    * 需要 1px 级别精准定位的，仍然使用 px。
    * 需要根据字号变化的（如 padding、margin 等）场景使用可以使用 em，较少不必要的代码。

  * 11. 属性缩写

  ...
    /* not recommended */
      border-top-style: none;
      font-family: palatino, georgia, serif;
      font-size: 100%;
      line-height: 1.6;
      padding-bottom: 2em;
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 0;

    /* recommended */
      border-top: 0;
      font: 100%/1.6 palatino, georgia, serif;
      padding: 0 1em 2em;
  ...

  * 12. 属性声明顺序
    > 1.Positioning。
    > 2.Box model。
    > 3.Typographic。
    > 4.Visual。
    > 由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

  ...
  .**** {   
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Box-model */ 
    display: block;
    float: right; 
    width: 100px;
    height: 100px;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
  }
  ...

  * 13. 必须为大区块样式添加注释, 小区块适量注释。
  * 14. 减少使用影响性能的属性, 比如position:absolute || float 。
  * 16. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作。
  * 17. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景。
  * 18. 充分利用html自身属性及样式继承原理减少代码量。

  ...
  <ul class="list"><li>这儿是标题列表<span>2010-09-15</span></ul>
  ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
  即可实现日期居右显示
  ...

注释

  /* CSS推荐注释，左右各空一个空格，区块注释说明 */
  .sell {
      /*background: #000;*/
  }

  /* CSS推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释 */
  /*
  .sell p {
      background: #000;
      font-size: 12px;
  }
  */

页面内的样式加载必须用链接方式

参考文档

• css：主要有缩进，换行，引号，注释等等。可以参考：
  • idiomatic-css

ps:建议大家在各个产品，严格遵守规范，以便后期的维护以及代码的健壮性等。

如果文档有更好的补充和好的建议，欢迎联系@博主

如有雷同，请联系@博主。

欢迎进入个人公众号 ，一起学习啊！