编码规范-css.md

头像
fania
    阅读 5 分钟
    1

    写在前面

    对于不同的编程语言来说，具体的编码规范各不相同，但是其宗旨都是一致的，就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。

    本文大部分内容来自网上，仅供参考学习！

    网络上的知识浩如烟海，而学到了才是自己的！！
    然后，老规矩，带上我们可爱的小伙伴...
    小伙伴

    语法

    • 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

    • 为选择器分组时，将单独的选择器单独放在一行。

    • 为了代码的易读性，在每个声明块的左花括号前添加一个空格。

    • 声明块的右花括号应当单独成行。

    • 每条声明语句的 : 后应该插入一个空格。

    • 为了获得更准确的错误报告，每条声明都应该独占一行。

    • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

    • 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

    • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

    • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

    • 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

    • 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

    • 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

    • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

        /* Bad CSS */
  .selector, .selector-secondary, .selector[type=text] {
    padding:15px;
    margin:0px 0px 15px;
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
  }

  /* Good CSS */
  .selector,
  .selector-secondary,
  .selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
  }

    声明顺序

    CSS属性的排列顺序,相关的属性声明应当归为一组，并按照顺序排列.

    1. Positioning
      定位:放首位. 定位可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式

    2. Box model
      盒子模型:决定了组件的尺寸和位置。

    3. Typographic
      字体排印:文字显示相关

    4. Visual
      可视化:颜色可视化

        .declaration-order {
    /* 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;
  }

      Tips :
      参考网址 : 完整的属性列表及其排列顺序请参考Recess

    带前缀的属性

    当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

    在 Textmate 中，使用 Text → Edit Each Line in Selection 。在 Sublime Text 2 中，使用 Selection → Add Previous Line 和 Selection → Add Next Line 。

    简写形式的属性声明

    在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明.过度使用简写形式会导致代码混乱，并且会对属性值带来不必要的覆盖,从而引起意外的副作用。

      /* Bad example */
  .element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
  }

  /* Good example */
  .element {
    margin-bottom: 10px;
    background-color: red;
    background-image: url("image.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

    单行规则声明

    只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。
    对于带有多条声明的样式，还是应当将声明分为多行。

      /* Single declarations on one line */
  .span1 { width: 60px; }
  .span2 { width: 140px; }
  .span3 { width: 220px; }

  /* Multiple declarations, one per line */
  .sprite {
    display: inline-block;
    width: 16px;
    height: 15px;
    background-image: url(../img/sprite.png);
  }
  .icon           { background-position: 0 0; }
  .icon-home      { background-position: 0 -20px; }
  .icon-account   { background-position: 0 -40px; }

    class 命名

    • class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

    • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

    • class 名称应当尽可能短，并且意义明确。

    • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

    • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

    • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

        /* Bad example */
  .t { ... }
  /* Good example */
  .tweet-header { ... }

    选择器

    • 对于通用元素使用 class ，这样利于渲染性能的优化。

    • 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

    • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

    • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

    样式的优先级

    一般情况下:

    （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

    但是下面的这种除外.则外部样式将覆盖内部样式。

      <head>
      <style type="text/css">
        /* 内部样式 */
        h3{color:green;}
      </style>

      <!-- 外部样式 style.css -->
      <link rel="stylesheet" type="text/css" href="style.css"/>
      <!-- 设置：h3{color:blue;} -->
  </head>
  <body>
      <h3>测试！</h3>
  </body>

    选择器的优先权

    选择器的优先权
    解释：

    1. 内联样式表的权值最高 1000；

    2. ID 选择器的权值为 100

    3. Class 类选择器的权值为 10

    4. HTML 标签选择器的权值为 1

    利用选择器进行计算,如下:

      <html>
    <head>
      <style type="text/css">
          #redP p {
               /* 权值 = 100+1=101 */
               color:#F00;  /* 红色 */
          }

          #redP .red em {
               /* 权值 = 100+10+1=111 */
               color:#00F; /* 蓝色 */

          }

          #redP p span em {
               /* 权值 = 100+1+1+1=103 */
               color:#FF0;/*黄色*/
          }
      </style>
    </head>
    <body>
       <div id="redP">
          <p class="red">red
             <span><em>em red</em></span>
          </p>
          <p>red</p>
       </div>
    </body>
  </html>

    结果： 标签内的数据显示为蓝色。

    CSS优先法则

    1. 选择器都有一个权值，权值越大越优先；

    2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

    3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

    4. 继承的CSS 样式不如后来指定的CSS 样式；

    5. 在同一组属性设置中标有“!important”规则的优先级最大；

    编辑器设置

    对编辑器设置相同配置，以避免常见的代码不一致和差异：

    • 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

    • 保存文件时，删除尾部的空白符。

    • 设置文件编码为 UTF-8。

    • 在文件结尾添加一个空白行。

      # editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]  
trim_trailing_whitespace = false
[*.py]
indent_size = 4

    浏览器的渲染机制

    1. DNS

    2. 服务器解析,请求数据库

    3. 解析数据,生成html文件, http response返回

    4. 浏览器解析http response

    5. 下载html , css , js

    CSS hack

    IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome

    注意事项

    • 注释
      请确保你的代码能够自描述、注释良好并且易于他人理解。

    其他

    参考网址
    Recess
    BootCSS编码规范
    CSS 的优先级机制
    浏览器~加载，解析，渲染
    CSS Hack
    CSS标签

    翻译心得编码规范css
    fania
    63 声望3 粉丝
    « 上一篇
    win10的KB3206632更新失败解决思路
    下一篇 »
    编码规范-html.md

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    Java中的双冒号运算符(::)：简化方法引用

    fania阅读 264

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新