编码规范-css.md

时间  2019-11-08
标签 编码 规范 css.md css 栏目 字符编码 繁體版
原文   原文链接

写在前面

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

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

网络上的知识浩如烟海，而学到了才是本身的！！
而后，老规矩，带上咱们可爱的小伙伴...
小伙伴git

语法

  • 用两个空格来代替制表符（tab） -- 这是惟一能保证在全部环境下得到一致展示的方法。github

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

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

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

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

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

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

  • 对于以逗号分隔的属性值，每一个逗号后面都应该插入一个空格（例如，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标签

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程