class如何命名更规范_html/css_WEB-ITnose
于是就有了下面的做法:
由此可见,class的命名真不是一件简单的事,尤其还要兼顾可辨别性与可读性。
class命名到底有多难
第一,class跟id不一样,class本来就是设计用来可以重复利用的,而id才是设计唯一的(如果遵循BEM,class几乎也都是唯一的了)。
第二,样式是可以覆盖的,而且先按照权重,再按照定义的先后顺序。也许你花了十分钟设计定义的一个class样式,人家分分钟就给你干掉了,这得多恼火;也许这个页面好好的,跑到另一个页面就跟原先的样式有了冲突。
所以class命名的难就难在既要重复利用,又要避免样式的冲突。如果要重复利用,那么当然是越简单越好,越抽象可用的地方越大,太具体了就完蛋了。而如果要避免样式冲突。BEM的方式最简单,class都唯一了,那还冲突个毛线;其次就是通过父元素限定作用域,可以搞几个层级,而不是单独一个class定义样式;还有就是追加class,来实现差异化;最后不同的页面不同的文件,你用你的我用我的。
// BEM.imgslide__item__img{}// 父元素限定.imgslide .item .img{}// 追加class.img{}.img--special{}// 不同页面不同文件// a.html & a.css.img{}// b.html & b.css.img{}
总之,不管有多难,我们还是得试试去解决问题,去寻找一些规律。
class命名的发展历程
关于class的命名,其实跟人名也差不多,如果要想别人看得懂,那关键还是在于可识别性。到目前为止class的命名大概经历了下面几个重要阶段:
混沌阶段
这个没什么好说的,刚开始学html的都是这样,名字先简单的来,不够再添加1,2,3什么后缀,或者中英混搭等等,如下:
h1.titleh2.title2h2.title2-1h2.title2-2div.hddiv.hd-sdiv.hd2div.hd-xiangxi
一个字,太乱。完全无章程,规律可循,想怎么写就怎么写,写到哪里是哪里。看class去猜意思很可能就是错误的,如.red{color:red;font-size:14px;},明明说好的红色,却顺带定义了个字体大小。
原子类阶段
这个关键在于拼凑组合,足够多的原子类拼成一个完整的样式:
.fl{float:left;}.fr{float:right;}.pr{position:relative;}.pa{position:absolute;}.tal{text-align:left;}.tac{text-align:center;}.tar{text-align:right;}.fs12{font-size:12px;}div.fs12.fl.pr.tacdiv.pa.tal
这种有两个缺点,第一是稍微复杂点的样式都要使用很多class组合,第二是如果要修改样式的时候得修改html文件,而不是css样式,而纯静态的页面是很少的,所以如果是前后端分离的,由php或后端语言渲染页面的话,改个样式还要通知后端同事去修改文件,那估计人家得疯掉。
模块阶段
到了这个时候,css经过这么多年的发展,页面的复杂性已经翻了好几倍了,那些无规划的混沌根本不够用,满眼的class看起来长得都差不多,后面全是1,2,3都不知道标到多少了,却不知道到底是啥区别;而原子类已经不适合频繁的修改调整更新,每更新下都是前后齐心协力。于是按职能划分的class命名规则就出现了
// l表示layout, g表示global, m表示mod,
.l-960.l-left.l-right.g-red.g-title.g-price.m-login.m-breadcrumb.m-slide
这种命名方式在一定程度解决了混乱不堪的问题,所有的按照职能划分看起来很美好,不过动不动加个前缀确实不怎么优雅,再者随着mod的增加,这个以m开头的前缀根本就不够用,于是又乱了,有加二级前缀的,也有另起前缀的。
BEM
这个估计地球上做前端的都知道吧,实在是太火了,所以不用来解释了。优点就是你只管写你自己的,99.99%的几率不会去干掉别人的样式,class实在太长了,能一样那得多高的几率啊。缺点还是class太长,太长,太长,重要的事情说三遍。一般都记不住自己定义的class,写css的时候只好对着去拷贝。然后最痛苦的就是去修改更新,明明很简单的东西,然后你还要搞个超长的class,那叫一个烦躁,想想都懒得动手。
他山之石
其实每个命名的发展经历都有其特定的历史意义,也当然有其价值。所以吸取之长,弃之短缺就很好了。比喻写简单demo的时候,我们就可以用到混沌阶段的命名,足够简单,不需要纠结思考;而原子类尤其是一些简单的样式,如一行代码就可以搞定,起个class名甚是纠结,还不如直接上原子类;至于模块类,说真的应用的场景就更多了,如布局,js操作类等;而BEM我们同样可借鉴其思想,如.class.class--name使用--表示特殊化,以区分-。
这里我们站在前人的肩膀上,试着去开辟一条道路,可以兼顾简洁可读性及可理解辨别性。当然class的简洁肯定离不开关键词的应用,这里我们先来过一遍常见的class关键词。
常见class关键词:
有了关键词之后,我们先来制定一些简单的规则
制定简单规则:
关键词及规则都有了,现在可以进入本文的核心的核心,实战操作。
实战操作
以布局入手,大概结构如下:
header.header>.inner-centersection.section-feature>.inner-center // ifsection.section-main>.inner-centersection.section-postscript>.inner-center // iffooter.footer>.inner-center
具体可参考HTML整站结构设计,这里我们可以看出都是些简单的关键词,比较好理解,一看就知道是什么。
现在问题来了,如果其他地方也要用到这些关键词怎么办?
修饰关键词
以header为例,我们可以添加前缀表示不同的header,如区块头部.block-hd(hd为header简写),modal头部.modal-hd,文章头部.article-hd。
同样标题也可以分为,页面标题.page-tt(title的简写),区块标题.block-tt等。
同样,这给我们提出了第二个问题,如果要特殊化某个class该怎么办?
特殊化class
以上面的tt为例,大概有三种办法:
第一种办法:直接修改class,将.page-tt修改成.page-user-tt(可以采用scss的%先定义共用的代码)。
第二种办法: 追加class特殊化,根据我们上面定义的规则,在.page-tt上追加一个class成为.page-tt.page-tt--user,注意.page-tt--user不是一个独立的class,它使基于.page-tt这个基础上的。
第三种办法: 使用父类,给一个范围,于是形成.page-user .page-tt。
一般我们使用的是第二种和第三种办法,因为这两种都有共同的.page-tt,可以比较方便控制一些基础共有的样式。
由第三个通过父类控制的办法,我们进入第三个要讨论的问题,层级结构
层级
最适合层级的例子莫过于ul>li结构了,如下面的结构:
一般来说我们也有两种办法定义层级,第一种为继承式,第二种为关键词式。
// 继承式ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text// 关键词式ul.card-list li.item a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text
由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的list,而li的子元素接着li的item;至于关键词式则完全由关键词来表示层级,list>item>filed正好构成三层等级。
最后由我们的层级进入我们最后一个问题,如何控制样式的范围
样式范围
这里以腾讯课堂的课程详细页右边栏为例,如下图:
三个区块的基础框架为:
.aside-block.block--xxx> h3.block-tt .block-bd
其中.aside-block.block--xxx用到了我们的特殊化class,而.block-tt,block-bd则使用了我们的修饰关键词,至于.aside-block与它的子元素之间则使用了我们上面说的继承式层级。现在根据这个层级结构我们定义基础样式如下:
.aside-block{ .block-tt{} .block-bd{}}
假设这里的联系机构区块的标题不一样,我们则可以:
.block--contact{ .block-tt{}}
当然如果本身有5个区块,2个标题一样,另外三个标题又一样,也许我们就有需要给.block-tt追加一个特殊化class,或者给aside-block特殊化一个class,如:
.aside-block{ .block-tt{ &.block-tt--special{} } .block-bd{}}// 或.aside-block{ &..aside-block--special{ .block-tt{} }}
基础框架讨论完毕之后,就轮到我们的内容了,以联系机构为例:
使用ul>li结构,所以样式是另外一个独立的范围,不嵌套在之前的.aside-block里面,html及css代码如下:
ul.contact-list li i.item-icon.icon-font.i-xxx a.item-tt p.gray
这里我们li没有设置class,而p使用了一个全局的class.gray
.gray{}.contact-list{ li{} .item-icon{} .item-tt}
同理如果我们有其他地方应用这个可以拷贝过去,而如果需要一点调整,我们可以使用父元素来控制,如这里我们可以使用.block--contact来进一步调整contact的样式,如:
.block--contact{ .contact-list{ li{} }}
至此,我们的class命名方法讨论完毕,说到底就是先记住一些必备的基础关键词,然后合理应用上刚才提出的修饰关键词,特殊化class,层级及最后的样式范围就可以了。
原文作者:结一
转载自:http://www.w3cplus.com/css/css-class-name.html
推荐阅读
-
CSS的class、id、css文件名的常用命名规则_html/css_WEB-ITnose
-
jQuery 如何 根据 value 获得 class_html/css_WEB-ITnose
-
【Html+Css】css命名规范、html标签语义化_html/css_WEB-ITnose
-
【CSS】class和id命名规则_html/css_WEB-ITnose
-
如何编写规范,灵活,稳定,高质量的HTML和css代码_html/css_WEB-ITnose
-
CSS命名规范,怎么命名才不会出错?_html/css_WEB-ITnose
-
用js拼接的html ,里面的class属性失效,帮忙看看应该如何拼接!_html/css_WEB-ITnose
-
【CSS】class和id命名规则_html/css_WEB-ITnose
-
jQuery 如何 根据 value 获得 class_html/css_WEB-ITnose
-
DIV+CSS 英文命名规范_html/css_WEB-ITnose