css规范

CSS 规范

命名规范

使用类选择器，尽量避免使用ID选择器定义样式

ID在一个页面中的唯一性导致了如果以 ID 为选择器来写 CSS，就无法重用。

以字母开头

• 必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。
• 不允许单个字母的类选择器出现。
• 不允许命名带有广告等英文的单词，例如 ad, adv, adver, advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。

全小写，并使用 - 连字符

• 下划线 _ 禁止出现在 class 命名中，统一使用 - 连字符。
• 禁止驼峰式命名。

命名应简约而不失语义

• 避免过度简写，.ico 足够表示这是一个图标，而 .i 不代表任何意思。
• 使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称。

文件命名举列

基本样式：base.css 框架布局：layout.css 模块样式：module.css 全局样式：global.css 或 common.css 字体样式：font.css 首页样式：index.css 链接样式：link.css 打印样式：print.css

常用类/ID命名举列

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

部分命名解释约定：

名称	类名	名称	类名
内容包裹器	.wrapper	页眉	.header
页脚	.footer	导航	.nav
迷你导航	.mini-nav	顶部导航	.top-nav
主体内容	.main	侧边栏	.sidebar
标志	.logo	搜索	.search
登录	.login	注册	.reg
标题	.tit-...	副标题	.subtit-...
按钮	.btn-...	链接	.link-...
背景图片	.bg-...	列表	.list-...
表格	.tb-...	标签	.tag-...
视频	.video-...	联系	.contact
地址	.address	表单	.frm-...

可以多看看如 Bootstrap 之类的前端框架里的 CSS 类命名。

CSS Reset

• Eric Meyer's "Reset CSS" 2.0

  全部归零，这种 Reset 过于暴力，有些不该改变的样式也被改变，导致大量基础样式需要添加。

• Normalize.css

  今后统一使用 Normalize.css，这也是 Bootstrap 使用的 Reset。

代码风格

CSS 属性值需要用到引号时，统一使用单引号

/* 不推荐 */
selectors { font-family:"5FAE8F6F96C59ED1"; }

/* 推荐 */
selectors { font-family:'5FAE8F6F96C59ED1'; }

　　

为单个 CSS 选择器或新申明开启新行

/* 不推荐 */
.home-count .hd,.content-title,.select-game-title .title { } .nav { }

/* 推荐 */
.home-count .hd,
.content-title,
.select-game-title .title { }
.nav { }

　　

CSS 属性书写顺序

建议遵循：布局定位属性、自身属性、文本属性、其他属性、CSS3属性。

/* 这些属性只是最常用到的, 并不代表全部 */

/* 布局定位属性 */
display / list-style / position (top,right,bottom,left) / float / clear / visibility / overflow

/* 自身属性 */
width / height / margin / padding / border / background

/* 文本属性 */
color / font / text-decoration / text-align / vertical-align / white- space / break-word

/* 其他（CSS3）  */
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

　　

CSS 浏览器私有前缀书写格式

selectors {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eff2f4));
    background: -webkit-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #eff2f4 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#eff2f4 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#eff2f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff2f4',GradientType=0 );
}

　　

不要以没有语义的标签作为选择器

/* 不推荐 */
.m-xxx div{ ... }

　　

CSS 单行书写法（根据个人习惯选择）

每个CSS选择符的主申明区中的属性在同一行内书写，每个属性之间空一格

CSS 多行书写法（根据个人习惯选择）

每个CSS选择符的主申明区中的每一条属性新起一行

selectors{
    height: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #858585;
    margin-bottom: 10px;
}

　　

注释

行间注释

直接写于属性值后面，如：

.search { background: #333 url(../img/search.gif) no-repeat; /*定义搜索框的背景*/ }

　　

整段注释

分别在开始及结束地方加入注释，如：

/*==========login==========*/
.frm-login { }
/*==========//END login==========*/

　　

注意：以下写法不可取

.news /* 这里是高度自动撑 */ { line-height: 1.5 }
.news { /*line-height:1.5 这里是高度自动撑*/ }

　　

Hack

• 原则上不允许使用Hack！
• 很多不兼容问题可以通过改变方法和思路来解决，并非一定需要 Hack，根据经验你完全可以绕过某些兼容问题。
• 一种合理的结构和合理的样式，是极少会碰到兼容问题的。
• 由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的 Hack。

统一Hack方法

.element {
    color:#000;             /*w3c标准*/
    [;color:#f00;];         /*Webkit(chrome和safari)*/
    color:#6669;           /*IE8*/
    *color:#999;            /*IE7*/
    _color:#333;            /*IE6*/
}
:root .element { color:#0f09; }  /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and ( -webkit-min-device-pixel-ratio:0) { .element { color:#336699; } }  /*opera*/
@-moz-document url-prefix(){ .element { color:#f1f1f1; } } /*Firefox*/

　　

简写 CSS 颜色属性值

/* 不推荐 */
selectors { color:#000000; background-color:#ddeeff; }

/* 推荐 */
selectors { color:#000; background-color:#def; }

　　

删除 CSS 属性值为 0 的单位

0就是0，任何单位都不需要 W3C 关于属性单位的说明

/* 不推荐 */
selectors { margin:0px; padding:0px; }

/* 推荐 */
selectors { margin:0; padding:0; }

　　

删除无用CSS样式

/* 不推荐 */
selectors { font-size:12px; }
.nav { }
.nav-item { height:20px; }

/* 推荐 */
selectors { font-size:12px; }
.nav-item { height:20px; }

　　

4.class的命名

1 颜色

使用颜色的名称或者十六进制。

举例：

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

　　

 2 字体大小

直接使用 font+字体大小 作为名称。

举例：

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

　　

 3 对齐样式

使用对齐目标的英文名称。

举例： 

.left{float:left;}

.bottom{float:bottom;}

　　

 

4 标题栏样式

使用 类别+功能 的方式命名。

举例：

.barnews{}

.barproduct{}

　　

.注意事项

1. 一律小写；

2. 尽量用英文；

3. 不加中杠和下划线；

4. 尽量不缩写，除非一看就明白的单词。

6.常用css文件命名

• 主要的 master.css

• 模块 module.css

• 基本共用 base.css

• 布局，版面 layout.css

• 主题 themes.css

• 专栏 columns.css

• 文字 font.css

• 表单 forms.css

• 补丁 mend.css

• 打印 print.css

 

区分他们，使他们具有特殊意义，通常需要为“帮手”。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义，
语义化的名称 通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。

不推荐

.fw-800 {
 font-weight: 800;
}
.red {
 color: red;
}

　　

推荐

.heavy {
 font-weight: 800;
}
.important {
 color: red;
}

　　

---

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

不推荐

#content .title {
 font-size: 2em;
}

　　

推荐

.content .title {
 font-size: 2em;
}

　　

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器，这使得它很奇怪。

// 这个选择器权重高于下面的选择器
#content .title {
 color: red;
}
// than this selector!
html body div.content.news-content .title.content-title.important {
 color: blue;
}

　　

---

CSS选择器中避免标签名

当构建选择器时应该使用清晰， 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
，而不是你的代码元素，这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

不推荐

div.content > header.content-header > h2.title {
 font-size: 2em;
}

　　

推荐

.content > .content-header > .title {
 font-size: 2em;
}

　　

---

尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。

考虑下面的DOM:

<article class="content news-content">
 <span class="title">News event</span>
 <div class="content-body">
   <div class="title content-title">
     Check this out
   </div>
 
   <p>This is a news article content</p>
 
   <div class="teaser">
     <div class="title">Buy this</div>
     <div class="teaser-content">Yey!</div>
   </div>
 </div>
</article>

　　

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类 和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

.content .title {
 font-size: 2rem;
}

　　

推荐

.content > .title {
 font-size: 2rem;
}
.content > .content-body > .title {
 font-size: 1.5rem;
} 
.content > .content-body > .teaser > .title {
 font-size: 1.2rem;
}

　　

---

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

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;

　　

推荐

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

　　

---

ID 和 Class（类） 名的分隔符

使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

另外，作为该标准，预设属性选择器能识别连字符（中划线）作为单词[attribute|=value]的分隔符，
所以最好的坚持使用连字符作为分隔符。

不推荐

.demoimage {}
.error_status {}

　　

推荐

#video-id {}
.ads-sample {}