不容忽略的——CSS规范

一、CSS分类方法:

  1. 公共型样式
  2. 特殊型样式
  3. 皮肤型样式
    并以此顺序引用
1 <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
2 <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
3 <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

二、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"。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

13140
来自专栏GreenLeaves

Vue.js系列之三模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

252100
来自专栏Modeng的专栏

Vue2.5笔记:v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生,Vue中也借鉴了指令这一特性,在 Vue 中指令都是带有 v-的特殊属性,那么指令有什么作用呢?

9710
来自专栏机器学习实践二三事

Shell && Vim快捷键

刚买到了自己一直想买的HHKB pro 2 type S,不得不说手感什么的确实没让我失望,重点是Ctrl的位置很适合类unix环境啊,不会快捷键都不好意思敲这...

21250
来自专栏前端说吧

CSS3中的animation动画

31150
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

each 方法用来遍历 jQuery 对象的,它的参数是一个事件处理函数,这个事件处理函数有两个参数,第一个参数是索引,第二个参数时索引对应的 DOM 对象,使...

13040
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

29970
来自专栏Java技术分享圈

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比

17420
来自专栏更流畅、简洁的软件开发方式

使用接口来统一控件的取值、赋值和初始化

      这里说的控件主要指的是文本框、下拉列表框这一类的控件,用户使用这些控件输入数据,然后我们需要提取这些数据进行处理。但是不同的控件有不同的取值方式,比...

20860
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

11040

扫码关注云+社区

领取腾讯云代金券