全国咨询/投诉热线:400-618-9090

首页技术文章正文

Web前端开发培训之CSS编码规范

更新时间:2017-04-14 来源:黑马程序员Web前端培训学院 浏览量:

CSS代码风格规则CSS代码有效性

使用有效的CSS代码。

可使用W3C CSS validator来验证css。

命名

class应优先虑以这元素具体目的来进行命名,应尽量简短且富有含义。

统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .demoimage {}  /* "demo" 和 "image" 中间没加 "-" */</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .error_status {}  /* 用下划线 "_" 是屌丝的风格 */</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .ads-sample {}</font>
复制代码

原则上,不建议缩写,除非一看就懂的缩写,如nav。

尽量避免使用id来控制样式。

框架css类命名清单
  • 全屏:full_bg(全屏背景)
  • 容器:wrapper(最外面的主框架)
  • 页头:header(子项:h_1、h_2、……)
  • 内容:container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav(子项:n_1、n_2、……)
  • 菜单:menu(子项:m_1、m_2、……)
  • 导航:nav(子项:n_1、n_2、……)
  • 子菜单:submenu
  • 侧栏:sidebar
  • 栏目:column(扩展:column1、column2、……)
  • 左右中:left、right、center
  • 搜索:search
  • 登陆:signin
选择器

避免出现过多的祖先选择器,各浏览器会有性能差异,消耗在选择器的时间也不尽相同。

尽量最多控制在3级以内。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. ul.example {}
  3. .example1 .example2 .example3 .example4 {}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example {}
  3. .example1, 
  4. .example2 {}</font>
复制代码

非必要的情况下不要使用元素标签名和ID或class进行组合。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. ul#example {}
  3. div.error {}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. #example {}
  3. .error {}</font>
复制代码

简化css

写属性值的时候尽量使用缩写。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { 
  3.   border-top-style:none; 
  4.   font-family:Palatino, serif; 
  5.   font-size:100%; 
  6.   line-height:1.6; 
  7.   padding-bottom:2em; 
  8.   padding-left:1em; 
  9.   padding-right:1em; 
  10.   padding-top:0; 
  11. }</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}</font>
复制代码

属性值为0时,忽略单位


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { margin:0px; padding:0px;}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { margin:0; padding:0;}</font>
复制代码

属性值出现小数点忽略0


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { font-size:0.8em}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { font-size:.8em}</font>
复制代码


省略URI外的引号

  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { background-image: url("images/noise.png");}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { background-image: url(images/noise.png);}</font>
复制代码

十六进制尽可能使用3个字符


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { color: #eebbcc; }</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { color: #ebc; }</font>
复制代码

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。

尽量避免使用CSS filters。

CSS代码格式规则单行书写

一个类一行,每个属性间用空格隔开,不用强制换行。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .example { 
  3.   display:block; 
  4.   float:left; 
  5.   width:200px; 
  6.   height:300px;padding:10px; 
  7. }</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}</font>
复制代码

分隔选择器

每个选择器和声明都要独立新行。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. a:focus, a:active { position: relative; top: 1px;}</font>
复制代码

  1. /* 推荐 */
  2. h1,
  3. h2,
  4. h3 { font-weight: normal; line-height: 1.2;}
复制代码

属性名完结

出于一致性的原因,在属性名和值之间加一个空格(可不是属性名和冒号之间噢)。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. h3 { font-weight:bold;}</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. h3 { font-weight: bold; }</font>
复制代码

声明完结

考虑到一致性和拓展性,请在每个声明尾部都加上分号。


  1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
  2. .test {
  3.   display: block;
  4.   height: 100px
  5. }</font>
复制代码
  1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
  2. .test { display: block; height: 100px;}</font>
复制代码

css书写顺序

书写顺序按显示属性,自身属性, 文本属性顺序。

显示属性

  • display
  • list-style
  • position
  • float
  • clear

自身属性

  • width
  • height
  • margin
  • padding
  • border
  • background

文本属性

  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
Css Meta规则编码

一般情况下编码同html的一致。

如果是urf-8,则不需要制定样式表的编码,因为它默认为urf-8。

注释头部注释

注明本CSS的用处,生成时间及作者等信息。


  1. <font color="rgb(51, 51, 51)" size="3">/* CSS Document  
  2. Use for:    website  
  3. Version:    1.0 
  4. Date:      time 
  5. Author:     your name 
  6. Update:      
  7. */</font>
复制代码

页面注释

有时候一份CSS会把首页和各种二级页面样式写在一起,这时需要做页面注释。


  1. <font color="rgb(51, 51, 51)" size="3">/*********************************** 
  2. * 首页 
  3. ***********************************/</font>
复制代码

分级注释

比如在main模块下,建立了news、photo等栏目,可使用分级注释,以指明层级结构。


  1. <font color="rgb(51, 51, 51)" size="3">/*----------------main-----------------*/
  2. #main {}
  3. .main-bg {}
  4. /* news */
  5. .news {}
  6. /* photo */
  7. .photo  {}</font>
复制代码

区块间注释
  1. <font size="3">/* news */
  2. .news {}
  3. /* photo */
  4. .photo  {}</font>
复制代码

修改注释

当后期维护中有修改到css,需添加修改的注释。


  1. <font color="rgb(51, 51, 51)" size="3">.news {} /* 修正横向滚动条错误 by your name */</font>
复制代码


本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://www.itheima.com/news/web.html 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名