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
-
全部归零,这种 Reset 过于暴力,有些不该改变的样式也被改变,导致大量基础样式需要添加。
-
今后统一使用 Normalize.css,这也是 Bootstrap 使用的 Reset。
代码风格
CSS 属性值需要用到引号时,统一使用单引号
/* 不推荐 */
selectors { font-family:"\5FAE\8F6F\96C5\9ED1"; }
/* 推荐 */
selectors { font-family:'\5FAE\8F6F\96C5\9ED1'; }
为单个 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:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element { color:#0f0\9; } /*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{}
.注意事项
-
一律小写;
-
尽量用英文;
-
不加中杠和下划线;
-
尽量不缩写,除非一看就明白的单词。
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 {}