黑马程序员IT技术论坛

搜索
加入黑马找回密码

QQ登录

只需一步,快速开始

2017年最新学习路线图黑马币兑换技术分通道神攻略:入学/技术分/生活/就业黑马入学流程各环节的评分标准
查看: 257|回复: 1

[学习交流] CSS编码规范

[复制链接]
  • TA的每日心情
    奋斗
    2017-1-19 11:37
  • 签到天数: 1 天

    [LV.1]初来乍到

    247

    黑马币

    1

    技术分

    96

    主题

    超级版主

    Rank: 8Rank: 8

    发表于 2016-10-12 13:48:35 | 显示全部楼层 |阅读模式
    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>
    复制代码



    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2016-12-17 21:44
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    58

    黑马币

    4

    技术分

    2

    主题

    中级黑马

    Rank: 3Rank: 3

    发表于 2016-10-14 09:16:38 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    发表回复

    *滑动验证:
    您需要登录后才可以回帖 登录 | 加入黑马

    本版积分规则

    关闭

    站长推荐上一条 /3 下一条


    快速回复 返回顶部 返回列表