资讯专栏INFORMATION COLUMN

CSS命名规范

includecmath / 2891人阅读

摘要:本篇介绍几种命名规范。使用的网站四其他命名规范等减少对结构的依赖增加重复性的使用几种命名规范比较与在命名上相反的点可以放心使用,以为都是在模块内但不推荐当前我们的网站略有思想更概括,中的,相当于的,相当于的,相当于的中文

本篇介绍几种CSS命名规范。 (规范详细请参考底部References)

一、NEC (nice easy css)

网易前端CSS开源项目

1.1 样式分类

重置和默认:reset + base

布局(g-) 例如头部,尾部,主体,侧栏等

模块(m-) 较大整体,如登录注册,搜索等

元件(u-) 不可再分个体,例如按钮,input框等

功能(f-) 使用频率较高样式,例如清除浮动

皮肤(s-) 例如文字色,背景色,边框色等

状态(z-) 例如hover,选中等

j- 专门用于js获取节点,勿占用

举个例子:

1.2 命名规则

样式命名时始终以以上几类(g-等)开头,然后使用后代选择器

约定后代选择器不使用单个字母+“-”的形式,不使用单个字母

通过使用后代选择器,==后代选择器不需要考虑名字是否已被使用==,因为只在当前模块生效
(还是有可能会污染,注意避免)

命名简约不失语义 .green2 --bad .wrap2 --good

相同语义的不同类命名 —可直接加数字或字母区分 .m-list .m-list2

出现率高的做成基类,再做扩展类:
基类+扩展类 :class="m-list m-list-2” class="u-btn u-btn-hover”

1.3 代码格式

选择器,属性和值小写

NEC规范推荐单行写完一个选择器定义(sass,不适用)

尽量不要省略分号

省略0时的单位

十六进制表示颜色,尽量缩写

根据属性重要性顺序书写

按布局、盒模型,修饰的顺序
推荐插件css comb (sublime text 插件)

1.4 优化方案

背景图优化合并

图片本身的优化
-- 色彩过于丰富无透明要求 --> jpg较高质量

-- 色彩过于丰富且有透明或者阴影要求--> png24
-- 色彩不太丰富且无论有无透明要求--> png8

多张图片合并的优化
-- 排列方式

-- 合并后图片大小不宜超过50k,
-- 为了保持一致性,记得保留PSD原图

如果CSS能做到,不要用js
css控制视觉变化,js只需要更改classname

1.5 最佳实践

统一语义理解及命名:

1.6 典型错误

不要以没有语义的标签作为选择器
.m-nav div{}

不要越级控制
.m-xxx .m-yyy a{}

不要在页面布局中使用后代选择器
.g-xxx .btn{}

不要用页面布局去控制模块或者元件
.g-xxx .m-yyy

1.7 使用NEC的网站

http://nec.netease.com/case
http://yuedu.163.com/

二、AliceUI规范

Alice的样式模块组织方式追求扁平化方式,分为三个层级:

基础框架(reset+iconfont+栅格)

通用模块

页面样式 (继承通用模块)

任何模块在页面中应该像一个盒模型,不和页面的其他元素互相影响,完美的Alice模块应该是一个“口”字型

2.1 命名规范

用“-”做命名空间上的区隔,最小化两个模块之间的命名冲突

第一个前缀作为通用模块标识,各业务线选取自己的前缀

模块名是必选的,要求表意的

模块内部类名继承上层名称

不推荐这样写,很容易造成命名冲突:

参看模块的样式:

Alice类命名规范

一个简单的使用Alice的例子:
https://github.com/aliceui/al...

三、BEM(Block,Element,Modifier)

Yandex团队提出的前端CSS命名方法论。
优点:less confusing & recognizable

3.1 BEM定义

Block: 一个块是一个独立的实体,块可以包含其他块;
例如一个搜索块;

Element: 一个元素是块的一部分,具有某种功能。元素是依赖上下文的,它们只有处于它们应该属于的块的上下文时才有意义。
例如搜索块里的input框或button;

Modifier: 修饰符作为一个块或者一个元素的属性,代表这个块或者是元素在外观或是行为上的改变。
例如tab选中高亮。

3.2 BEM命名约定

一种命名规则:

块名:block-name,它为元素和修饰符定义了命名空间

元素名:与块名使用“__”连接(double underscore),block-name__ele-name

修饰符名:使用“_”连接(single underscore)
对于Boolean类型修饰符 —— owner-name_mod-name;

对于key-value类型的修饰符 —— owner-name_mod-name_mod-val;

举个例子:
html:

CSS:

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

其他命名规则也有很多,例如:

Two dash style
例如:block-name__elem-name--mod-name

CamelCase style
例如MyBlock__SomeElem_modName_modVal

--BEM提供一种规范,具体命名规则可以根据个人偏好选择

BEM的关键是光凭名字就可以判断某个标记是用来干什么的。通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。
BEM可能看上去有点滑稽,而且有可能导致我们输入更长的文本(大部分编辑器都有自动补全功能,而且gzip压缩将会让我们消除对文件体积的担忧),但是它依旧强大。

3.3 使用BEM的网站

http://company.yandex.ru/
https://hh.ru/

四、其他命名规范

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

减少对 HTML 结构的依赖

增加 CSS class 重复性的使用
http://www.w3cplus.com/css/oo...

几种命名规范比较:

NEC 与 AliceUI 在命名上相反的点:

.m-list .title 可以放心使用,以为都是在模块内,但AliceUI不推荐

当前我们的网站略有OOCSS思想

BEM更概括,NEC中的g-,m-相当于BEM的block,u-相当于BEM的element, f-,z-,s-相当于BEM的modifier.

References

[1].http://nec.netease.com/
[2].https://github.com/aliceui/al...
[3].http://getbem.com/introduction/ (BEM)
[4].https://en.bem.info/methodolo...
**http://www.w3cplus.com/css/be...中文)
[5].https://segmentfault.com/a/11... (BEM)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115439.html

相关文章

  • CSS命名规范

    摘要:命名规则样式类名全部用小写,首字符必须是字母,禁止数字或其他特殊字符。其他禁止使用在样式表命名中,一律使用命名。什么是命名空间通过统一的命名规范定义命名的范围,成为命名空间。1 前端开发命名规范 1.1 为什么要制定CSS命名规范 统一的命名规范,便于多人开发维护时代码统一,减少项目沟通和交接的成本,增加代码的语义化。 1.2 CSS命名规则 样式类名全部用小写,首字符必须是字母,禁止数...

    vvpale 评论0 收藏0
  • CSS学习笔记(十二) CSS命名规范

    摘要:引言最近想将这几个月做过的东西组件化,然后首先想到的是编码规范化本文只涉及命名规范,搬来了造好的轮子。举例对齐样式使用对齐目标的英文名称。举例注意事项一律小写尽量用英文不加中杠和下划线尽量不缩写,除非一看就明白的单词。 引言:最近想将这几个月做过的东西组件化,然后首先想到的是 编码规范化!本文只涉及 CSS 命名规范,搬来了Alloyteam 造好的轮子。可能并不完全适用,在以后...

    stormjun 评论0 收藏0
  • 好的 CSS 命名规范可以节约 Debug 时间

    摘要:简评是一种很耗时的操作,如果有良好的命名规范可以节约很多的时间。一些团队使用连字符分隔符,而其他团队则倾向于使用更加结构化的称为的命名规范。一般来说,命名规范有三个问题要解决能够通过名字就能清楚选择器的功能。 简评:Debug CSS 是一种很耗时的操作,如果有良好的命名规范可以节约很多的 Debug 时间。 使用连字符(-)分隔字符串 你可能习惯了在 Javascript 中使用小驼...

    wean 评论0 收藏0
  • css命名和书写规范

    摘要:前言在项目开发中对于名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来,且一定要有值如每个标签都要有开始和结束,且 前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下....

    wua_wua2012 评论0 收藏0
  • css命名和书写规范

    摘要:前言在项目开发中对于名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下命名规则说明所有的命名最好都小写属性的值一定要用双引号括起来,且一定要有值如每个标签都要有开始和结束,且 前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下....

    王笑朝 评论0 收藏0

发表评论

0条评论

includecmath

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<