码迷,mamicode.com
首页 > Web开发 > 详细

CSS规范

时间:2015-09-04 15:35:25      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

一、CSS分类方法:

  1. 公共型样式
  2. 特殊型样式
  3. 皮肤型样式
    并以此顺序引用

 技术分享

二、CSS命名规则

  1. 使用类选择器,放弃ID选择器
  2. NEC特殊字符:"-"连字符
  3. 分类的命名方法:使用单个字母+"-"为前缀
    布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。
     后代选择器命名
    1. 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
    2. 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
    3. 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
    4. 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
    5. 皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
    6. 状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{}),具体详见命名规则的扩展相关项。

  4. 不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器
    不允许单个字母的类选择器出现
  5. 相同语义的不同类命名
    直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等)

         模块和元件的扩展类的命名方法

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。

补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。

三、代码格式

  1. 选择器、属性和值都使用小写
  2. 最后一个值也以分号结尾
  3. 省略值为0时的单位
  4. 使用单引号
根据属性的重要性按顺序书写
显示属性、自身属性、文本属性和其他修饰

技术分享
四、优化

如果CSS可以做到,就不要使用JS

五、注意

  • .class{}

    不要以一个没有类别的样式作为主选择器,这样的选择器只能作为后代选择器使用,比如.m-xxx .class{}。

  • 选择器并不需要完整反映结构嵌套顺序,相反,能简则简。
  • 扩展类必须和其基类同时使用于同一个节点。
    错误:class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。
    正确:class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。

 

 

CSS规范

标签:

原文地址:http://www.cnblogs.com/chaoran/p/4781708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!