来自 前端知识 2019-11-14 17:53 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

又不亮堂怎么命名class了

什么鬼,又不了然怎么命名class了

2015/10/25 · CSS · class

初藳出处: 结一(@结一w3cplus)   

信任写css的人都会遇上下边包车型地铁主题材料:

  •  不佳,怎么命名这一个class,好像不太合适,假使冲突了如何做,要不要设计成通用一点…
  •  而改别人css代码的时候则会一向有个问号:那个class到底是只在这里个地点用了,依然另内地点都用了?

于是乎就有了上面包车型大巴做法:

  •  最终到底被逼出了个class,简洁也好,中国和英国混合着去搭配也罢,看着没头没脑也没涉及,反正最后页面展现出来的。
  •  这些class应该是独有那一个地点使用,笔者能够放心写。上线之后。倘若没难题,则偷偷自作者欣赏,看吗难点就像此轻易,分分钟化解啊;假使矛盾了,则极端感慨,哎,改的时候小编就隐约不安啊,妈蛋,深坑,那是哪个人写的,何人写的!!!
  •  不佳,那几个class说不佳其余地点也应用了,作者得加个约束范围,加个父成分?要不另行再命名个class吧,相比较保证。最终只要没难点则意味着幸好对比灵活,怎么说哥也是混过的,依然有几斤几两的;假若卓殊则象征防不慎防啊,那也太太太坑了呢。

简来说之,class的命名真不是生机勃勃件轻便的事,越发还要统筹可辨别性与可读性。

class命名到底有多难

率先,class跟id不平等,class本来正是规划用来能够再度使用的,而id才是设计唯生龙活虎的(如若固守BEM,class大约也都是有一无二的了卡塔 尔(英语:State of Qatar)。

其次,样式是能够覆盖的,而且先依据权重,再依照定义的先后顺序。大概你花了十分钟统筹概念的一个class样式,人家分分钟就给您干掉了,这得多恼火;也许那些页面好好的,跑到另三个页面就跟原先的体制有了冲突。

故而class命名的难就难在既要重复使用,又要制止样式的矛盾。如若要重复利用,那么自然是越轻巧越好,越抽象可用的地点越大,太现实了就崩溃了。而只要要防止样式冲突。BEM的办法最简易,class都唯一了,那还冲突个毛线;其次正是经过父成分限制作用域,能够搞多少个层级,并非单独三个class定义样式;还有正是追加class,来贯彻差别化;最终分裂的页面分化的文书,你用你的作者用本人的。

CSS

// BEM .imgslide__item__img{} // 父成分限制 .imgslide .item .img{} // 追加class .img{} .img--special{} // 分裂页面差异文件 // a.html & a.css .img{} // b.html & b.css .img{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// BEM
.imgslide__item__img{}
 
// 父元素限定
.imgslide .item .img{}
 
// 追加class
.img{}
.img--special{}
 
// 不同页面不同文件
// a.html & a.css
.img{}
// b.html & b.css
.img{}

总的说来,不管有多难,大家依旧得尝试去解决难题,去追寻一些准则。

class命名的前进进度

至于class的命名,其实跟人名也基本上,借使要想外人看得懂,这根本依然在于可识别性。到日前截至class的命名大概阅世了上面多少个关键阶段:

  •  混沌阶段,未有法规正是最佳的准绳
  •  原子类阶段,集中神龙现身手
  •  模块阶段,以效能分开,加多前缀
  •  BEM阶段,法则不改变

混沌阶段

以此没什么好说的,刚初叶学html的都是这样,名字先轻便的来,缺乏再增多1,2,3哪些后缀,也许中国和英国混合着搭配等等,如下:

CSS

h1.title h2.title2 h2.title2-1 h2.title2-2 div.hd div.hd-s div.hd2 div.hd-xiangxi

1
2
3
4
5
6
7
8
h1.title
h2.title2
h2.title2-1
h2.title2-2
div.hd
div.hd-s
div.hd2
div.hd-xiangxi

二个字,太乱。完全无章程,规律可循,想怎么写就怎么写,写到哪个地方是哪儿。看class去猜意思很恐怕就是不当的,如.red{color:red;font-size:14px;},明明说好的革命,却顺手定义了个字体大小。

原子类阶段

其黄金年代关键在于拼凑组合,丰富多的原子类拼成八个总体的体裁:

CSS

.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;}

1
2
3
4
5
6
7
8
.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;}

CSS

div.fs12.fl.pr.tac div.pa.tal

1
2
div.fs12.fl.pr.tac
div.pa.tal

这种有三个破绽,第一是微微复杂点的样式都要接收过多class组合,第二是只要要校订样式的时候得纠正html文件,实际不是css样式,而纯静态的页面是超少的,所以只倘诺前后端分离的,由php或后端语言渲染页面包车型大巴话,改个样式还要通告后端同事去改进文件,那推断人家得疯掉。

模块阶段

到了那时,css经过这么多年的升高,页面包车型地铁复杂性已经翻了少几倍了,那几个无规划的鸠拙根本相当不够用,满眼的class看起来长得都大概,后边全都是1,2,3都不亮堂标到多少了,却不明白终究是啥不相同;而原子类已经不符合频仍的改换调解立异,每更新下都以内外同心同德。于是按效果与利益分开的class命名法则就现身了

CSS

// l表示layout, g表示global, m表示mod, .l-960 .l-left .l-right .g-red .g-title .g-price .m-login .m-breadcrumb .m-slide

1
2
3
4
5
6
7
8
9
10
// 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, footer, container, main, content, aside, page, section
  •  包裹类:wrap, inner
  •  区块类:region, block, box
  •  结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
  •  列表类:list, item, field
  •  主次类:primary, secondary, sub, minor
  •  大小类:s, m, l, xl, large, small
  •  状态类:active, current, checked, hover, fail, success, warn, error, on, off
  •  导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
  •  交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
  •  星级类:rate, star
  •  分割类:group, seperate, divider
  •  等分类:full, half, third, quarter
  •  表格类:table, tr, td, cell, row
  •  图片类:img, thumbnail, original, album, gallery
  •  语言类:cn, en
  •  论坛类:forum, bbs, topic, post
  •  方向类:up, down, left, right
  •  其余语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

有了关键词之后,大家先来制订一些简便的平整

创立简单法则:

  •  以中写道连接,如.item-img
  •  使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
  •  状态类直接使用单词,参照他事他说加以考察上边的严重性词,如.active, .checked
  •  图标以icon-为前缀(字体Logo采取.icon-font.i-name措施命名卡塔 尔(阿拉伯语:قطر‎。
  •  模块接纳关键词命名,如.slide, .modal, .tips, .tabs,特殊化接纳地方两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  •  js操作的类统HUAWEI上js-前缀
  •  不要超过八个class组合使用,如.a.b.c.d

重大词及准绳都有了,今后能够步向本文的大旨的中坚,实战操作。

实战操作

以布局入手,大致结构如下:

CSS

header.header>.inner-center section.section-feature>.inner-center // if section.section-main>.inner-center section.section-postscript>.inner-center // if footer.footer>.inner-center

1
2
3
4
5
header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.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,能够相比较实惠调控一些功底共有的体裁。

由第三个通过父类调节的情势,大家进来第2个要钻探的标题,层级结构

层级

最切合层级的例子莫过于ul>li结构了,如下边包车型客车构造:

XHTML

<ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>

1
2
3
4
5
6
7
<ul>
    <li>
        <a href="#"><img src="" alt=""></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li>
</ul>

类似的话大家也是有三种方法定义层级,第生机勃勃种为继承式,第两种为机要词式。

CSS

// 世襲式 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.田野-img h3.田野先生-tt>a.田野同志-tt-link p.田野-text

1
2
3
4
5
6
7
8
9
10
11
12
13
// 继承式
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刚刚构成三层等第。

最后由大家的层级步入大家最终三个难点,如何支配样式的限定

体制范围

这里以Tencent教室的科目详细页左侧栏为例,如下图:

澳门金莎娱乐手机版 1

多少个区块的根基框架为:

CSS

.aside-block.block--xxx> h3.block-tt .block-bd

1
2
3
.aside-block.block--xxx>
    h3.block-tt
    .block-bd

其中.aside-block.block--xxx用到了小编们的非正规化class,而.block-tt,block-bd则利用了笔者们的修饰关键词,至于.aside-block与它的子元素之间则使用了我们地点说的世襲式层级。今后依据那个层级结构大家定义基本功样式如下:

CSS

.aside-block{ .block-tt{} .block-bd{} }

1
2
3
4
.aside-block{
    .block-tt{}
    .block-bd{}
}

即便这里的交流机构区块的标题不均等,大家则足以:

CSS

.block--contact{ .block-tt{} }

1
2
3
.block--contact{
    .block-tt{}
}

本来固然自己有5个区块,2个标题同样,其它多个标题又相近,大概大家就有亟待给.block-tt日增八个特别化class,或许给aside-block澳门金莎娱乐手机版 ,特殊化贰个class,如:

CSS

.aside-block{ .block-tt{ &.block-tt--special{} } .block-bd{} } // 或 .aside-block{ &..aside-block--special{ .block-tt{} } }

1
2
3
4
5
6
7
8
9
10
11
12
.aside-block{
    .block-tt{
        &.block-tt--special{}
    }
    .block-bd{}
}
// 或
.aside-block{
    &..aside-block--special{
      .block-tt{}
  }
}

底蕴框架研究完成之后,就轮到我们的内容了,以关系单位为例:

使用ul>li协会,所以样式是其余一个独门的界定,不嵌套在事先的.aside-block中间,html及css代码如下:

CSS

ul.contact-list li i.item-icon.icon-font.i-xxx a.item-tt p.gray

1
2
3
4
5
ul.contact-list
    li
        i.item-icon.icon-font.i-xxx
        a.item-tt
        p.gray

这里大家li未有设置class,而p使用了一个大局的class.gray

CSS

.gray{} .contact-list{ li{} .item-icon{} .item-tt }

1
2
3
4
5
6
.gray{}
.contact-list{
    li{}
    .item-icon{}
    .item-tt
}

同理假使大家有别的市方使用这些可以拷贝过去,而只要急需或多或少调解,大家能够使用父成分来支配,如这里我们得以应用.block--contact来越发调动contact的样式,如:

CSS

.block--contact{ .contact-list{ li{} } }

1
2
3
4
5
.block--contact{
    .contact-list{
        li{}
    }
}

现今结束,大家的class命名方法探讨完成,提及底正是先记住一些至关重要的底蕴关键词,然后合理运用上刚刚建议的修饰关键词,特殊化class,层级及最后的体裁范围就足以了。

1 赞 2 收藏 评论

澳门金莎娱乐手机版 2

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:又不亮堂怎么命名class了

关键词: