CSS开发规范

时间 2019-11-13

标签 css 开发规范栏目 CSS 繁體版

原文原文链接

CSS开发规范

概述

制定本规范的目的在于使咱们的CSS代码更加易于维护和重用，从而提高效率执行本规范时建议的流程
建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先须要规划样式并分为共有样式和页面个性化样式，而后才开始编码，编码的同时进行Debug，Validate和代码片段的总结，而不是在全部模板都完成后才进行这三个步骤。 css

1、selector 命名

命名除 .fn- , .ui- , .sl- 外，可自定义命名。请慎用 selected current disabled first last success error。
通常状况下，若是命名比较通用，好比 current，请限定在相应的上下文环境中。好比其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即便是为了重用，也应该注意。只有在很是明确不会影响到其余组件工做，而且其余人不会写这种命名的状况下，才让它变成全局通用的。
做为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其余命名一概使用小写字母。

2、CSS文件注释

组件注释

/**
 * @name: 组件名
 * @overview: 组件介绍
 * @require: 依赖的样式
 * @author: 小鱼(sofish@163.com)
 */

块状或行内元素，都请使用 /* comment */ 注释，注释文字先后端保持各有一个空格。
为了您的体验着想，一目了解的代码，就不要注释了，好比 “display:none; /* 让元素看不见 */” 。

3、CSS文件

文件编码必须使用utf-8（无BOM）
文件一概经过link方式引入（NOT @import）
当只是单个页面使用时，才写在<head>的<style>中。

4、hack规则

通常状况下，不要使用 IE 条件注释： <!-[if IE]><![endif]->
通用 Hack

.all-IE{property:value\9;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }

固然，强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，作点小trick。好比：
```
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
```
关于Hack: 在firefox写完，IE有问题？仍是其余浏览器也出现了。你知道IE Hack 能解决。我想，你也可能知道，用其余方法也能绕过。建议少用Hack。

5、CSS书写规范

1.以下写法为例: html

第一种方式：（强烈推荐）

/* 区域模块-1 */
.tech, .ued{
    background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
    width:950px;
    margin:0 auto;
}
.tech .wd{
    width:620px;
    float:left;
}

第二种方式：(若是让其余人看，请先格式化)

/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arail;}

2.须要很是注意的点 web

区域模块间用空行分隔
多个选择器写一块儿时，逗号（,）后紧跟一个空格
避免行内样式，即便是JS，也应该尽可能使用class/ID来决定显示，而非行内样式。
避免使用低效选择器，参考http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html
尽可能使用缩写，好比 font:700 normal 12px/1.5 arial; 通常不要写成
```
font-weight:600;
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arial;
```
一般须要使用缩写规则的: express

padding: top right bottom left; <--> padding: top-bottom right+left; <--> padding: top left-right bottom; <--> padding: top-right-bottom-left; 如：padding:1px 2px 3px 4px;
margin: 同上
color: red; color;#FFF; color:#ABCABC （颜色名>16进制写法；颜色名采用小写，16进制使用大写；写3位，仍是6位，自便）
background: color imageUrl repeat attachment position; 如：background:#ddd url(wd.png) no-repeat scroll 10px 20px;
border: size style color; 如: border:1px solid #ddd;
font: weight variant style size/lineHeight family; 如 font:700 small-caps italic 12px/1.5 "Courier New"; font-weight 统一用 500 代替 normal, 用 700 代替 bold;
list-style: type position image; 如：list-style: square inside url(wd.png); 不过，一般咱们要使用的是 list-style:none;

CSS3 书写规范：浏览器私有写法在前，标准写法在后。

-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

书写顺序
不强制书写顺序。但咱们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协做来讲是很是重要的：
1. 框架为先，细节次之。
好比写一个浮动容器的样式，咱们应该先让这个容器的框架被渲染出来，让你们看到基本的网站框架。而后再再去渲染容器里面的内容。最终呈现给用户. 一般像 color font padding 之类的，写在后面。
```
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
```
2.有因才有果。
好比想使用”图片替换文字“技术，一般要使用的text-indent。若是咱们使用标签的是 span：<span>这个文字将被图片替换</span>，那么正确写法：后端
```
.thepic{display:block;text-indent:-9999em;}
```
咱们应该是先将 span 变成”块级元素“，再将文字 indent。而不是先 indent 再变成块级的。
又如咱们，若是想让一个 span 使用 margin, 那么咱们应该这样写：浏览器
```
span{display:block;margin-bottom:10px;}
```
而非margin-bottom先行，由于没有 display 以前，行内元素是没有 margin 的。服务器

6、IE私有特性

expression

记住一句话：不管何时，都不要使用它。用 Javascript 吧。更优雅，更灵活。框架

filter

应该尽可能避免使用 AlphaImageLoader,能够适当在投影/发光/渐变/去色方面上使用。 iphone

IE bug

7、如何规划你的 CSS 文件结构

1.必定要有全局设置

全局设置能够避免重复书写一样的东西。好比3人在一个项目中，假设项目中涉及到的连接有 10 种颜色，若是有全局重设，咱们就能够统一设置颜色。若是没有，咱们可能每一个都会为本身所负责部分的连接定义相应的颜色。这样一来就致使多处定义，且定义不统一。之后维护须要到各个地方都改。这是很麻烦的事。另外就是css文件也会所以变大。因此，在写以前，你们应该先分析视觉稿，统一全局设置。
```
/* global reset */
body{padding:0;margin:0;font.....}
a{color:#07f;}
a:hover{color:#555;}
```
须要注意的是，通常状况下，不要直接给标签写样式。而应该使用 class。像下面这种写法，并不合适: ide
```
h1{font-size:30px}
h2{font-size:20px}
h3{font-size:10px;}
```
若是有另一个 h2 也要使用 10px 的，而其余的都仍使用 20px 的，那可就很差办了。因此，推荐用这种方法：
```
/* global classes */
.text-size30{font-size:30px;}
.text-size20{font-size:20px;}
.text-size10{font-size:10px;}
...
<h2 class="text-size20">...
<h2 class="text-size10">...
```

2.必定要模块化

有两点须要注意的，一是，注意代码重用的模块化；另外一是，注意 HTML 结构的模块化，而不是分块。

代码重用的模块化：

<div class="margin-test">
        <div class="margin-2">i am 2.</div>
    </div>
    <div id="module-1" class="module">
        <h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    <div id="module-2" class="module">
        < h3>TITLE</h3>
        <p class="module-item">
            some text
        </p>
    </div>

    /* module, reuse style in module scrope*/
    .module{}
    .module-status{}
    .module-item{}
    .module-status .module-1-item{}

    /* customize */
    #module-1 .module-item{}
    #module-2 .module-item{}

HTML 的模块化：
咱们应该这样写（他们的视觉是一体的，代码也应该是一体的）：

<div id="module-1" class="module">
    <h3>TITLE</h3>
    <p class="module-item">
        some text
    </p>
 </div> <!-- #module .module -->

而不是这样写：

<h3>TITLE</h3> <!-- 第一块 -->
<div id="module-1" class="module">
<p class="module-item">
    some text
</p>
</div> <!-- 第二块 -->

8、值得注意的事

1.Background Color

通常咱们都会写: background:url(path/to/image) no-repeat 0 0;
当元素背景是深色的时候，好比#000，咱们一般会选择一种比较浅的颜色来作为文本的颜色，好比#fff，为了不网速缓慢致使CSS已经加载，而图片仍未加载完成或图片服务器挂掉时文本不可见，请尽可能使用加上CSS定义的背景颜色，如：background:#e8edef url(path/to/image) no-repeat 0 0;
2.has Layout
别用轻易使用hack，IE下不少兼容性问题都是 has Layout 引发的。试着给元素加上:
```
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
```