【亚洲必赢官网】又不精通怎么命名class了

怎么着鬼,又不精通怎么命名class了

2015/10/25 · CSS ·
class

原稿出处:
结一(@结一w3cplus)   

相信写css的人都会赶上上边的难题:

  •  倒霉,怎么命名那么些class,好像不太对劲,如若争辩了怎么做,要不要规划成通用一点…
  •  而改旁人css代码的时候则会一贯有个难题:那些class到底是只在这几个地点用了,依旧其余地点都用了?

于是乎就有了下边的做法:

  •  最终到底被逼出了个class,简洁也好,中国和英国混搭也罢,望着一头雾水也没涉及,反正最终页面展现出来的。
  •  这几个class应该是唯有那几个地点接纳,我得以放心写。上线之后。假使没难点,则偷偷自我欣赏,看呢难点就那样简单,分分钟搞定啊;若是冲突了,则最为感慨,哎,改的时候我就隐约不安啊,妈蛋,深坑,那是何人写的,何人写的!!!
  •  不佳,这么些class说不定其余地方也应用了,我得加个限制范围,加个父元素?要不重复再命名个class吧,相比较有限帮助。最终只要没难题则表示还好比较灵活,怎么说哥也是混过的,如故有几斤几两的;如若有标题则代表防不慎防啊,那也太太太坑了啊。

有鉴于此,class的命名真不是一件简单的事,尤其还要兼任可辨别性与可读性。

(本文小编Mrcxt,原文链接:

纲要

  • 布置布局,划分全体结构
  • 内容区域,从总体到部分,局地中的通用部分,依据上下文应用样式
    • 公共底部(public-header)、尾部(public-footer)
    • 公物容器(public-container/inner-center)
  • css文件,html结构,多考虑
    • 毫无让内联元素与块级元素处于同一流别下,如a标签与div标签
    • reset.css、common.css、index.css
    • 内需转变的元素,父元素统统进行清理,给予统一的类clearfix
    • 宽中度:使用偶数单位。
  • 好好的代码规范和命名
    • 不超过三级命名
  • 巧妙属性和因素合作,还有没有更好的方案

    • 因地制宜overflow,针对部分图纸、文字超出隐藏的图景。
    • text-overflow,超出的文字部分,省略号显示。
    • a标签可以嵌套任何p,h,div等标签(依据新的规范)一般见于一致组标题、图片文字组合等链接同一个地点的,那么大一块地点都急需链接样式去跳转,那样做相比较方便。

      <a href="#" class="title">
          <h4>Voluptate cillum fugiat.</h4>
          <p class="comment">Cheese, tomato, mushrooms, onions.</p>
      </a>
      
  • 协作和细节的处理(放大100%以上,才能观望端倪)

    • 反思HTML结构是还是不是合理
      • 调节错误的时候,让错误的视觉效果极大化,更易于看到难点。
    • css Hack处理

纲要

  • 安排布局,划分全体布局
  • 情节区域,从总体到部分,局地中的通用部分,依照上下文应用样式
    • 公家尾部(public-header)、底部(public-footer)
    • 国有容器(public-container/inner-center)
  • css文件,html结构,多考虑
    • 无须让内联元素与块级元素处于相同级别下,如a标签与div标签
    • reset.css、common.css、index.css
    • 内需扭转的元素,父元素统统进行清理,给予统一的类clearfix
    • 宽高度:使用偶数单位。
  • 良好的代码规范和命名
    • 不超越三级命名
  • 巧妙属性和要素协作,还有没有更好的方案

    • 机动overflow,针对有的图片、文字超出隐藏的意况。
    • text-overflow,超出的文字部分,省略号展现。
    • a标签能够嵌套任何p,h,div等标签(根据新的业内)一般见于一致组题目、图片文字组合等链接同一个位置的,那么大一块地点都须要链接样式去跳转,那样做相比方便。

      <a href="#" class="title">
          <h4>Voluptate cillum fugiat.</h4>
          <p class="comment">Cheese, tomato, mushrooms, onions.</p>
      </a>
      
  • 匹配和细节的拍卖(放大100%之上,才能收看端倪)

    • 反思HTML结构是不是合理
      • 调节错误的时候,让错误的视觉效果极大化,更易于见到难点。
    • css Hack处理

class命名到底有多难

第一,class跟id不均等,class本来就是规划用来可以再度使用的,而id才是设计唯一的(即便服从BEM,class大概也都是唯一的了)。

第二,样式是足以覆盖的,而且先根据权重,再按照定义的先后顺序。也许你花了十分钟规划概念的一个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{}

简单的讲,不管有多难,大家如故得尝试去解决难点,去搜寻一些规律。

相信写css的人都会遇见上面的标题:

一体化布局

亚洲必赢官网 1

  • page-content
    • header
    • section-feature(可增/删)
    • section-main
    • section-postscript(可增/删)
    • footer
  • 公共部分
    • inner-center

全体结构

亚洲必赢官网 2

  • page-content
    • header
    • section-feature(可增/删)
    • section-main
    • section-postscript(可增/删)
    • footer
  • 公物部分
    • inner-center

class命名的升华进度

有关class的命名,其实跟人名也大都,假使要想别人看得懂,那根本依旧在于可识别性。到当前甘休class的命名大约经历了上边多少个主要阶段:

  •  混沌阶段,没有规则就是最好的条条框框
  •  原子类阶段,聚集神龙出现手
  •  模块阶段,以功用划分,添加前缀
  •  BEM阶段,规则不变
  • 不佳,怎么命名那个class,好像不太方便,假设冲突了如何是好,要不要统筹成通用一点…
  • 而改外人css代码的时候则会一向有个难题:这几个class到底是只在那一个地点用了,依旧其他地方都用了?

or

  • page-content
    • header
    • section-feature(可增/删)
    • section-name-1
    • section-name-2
    • footer
  • 公家部分
    • inner-center/public-container

or

  • page-content
    • header
    • section-feature(可增/删)
    • section-name-1
    • section-name-2
    • footer
  • 国有部分
    • inner-center/public-container

混沌阶段

以此没什么好说的,刚开端学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;},明明说好的甲辰革命,却顺手定义了个字体大小。

于是就有了上边的做法:

section-main

section-main

原子类阶段

这么些关键在于拼凑组合,丰盛多的原子类拼成一个总体的体裁:

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或后端语言渲染页面的话,改个样式还要布告后端同事去修改文件,那估计人家得疯掉。

  • 末了到底被逼出了个class,简洁也好,中国和英国混搭也罢,看着一头雾水也没涉及,反正最后页面显示出来的。
  • 以此class应该是只有那一个地方选拔,我得以放心写。上线之后。如果没难题,则悄悄自我欣赏,看呢难点就这么不难,分秒钟搞定啊;借使争论了,则极端感慨,哎,改的时候我就隐约不安啊,妈蛋,深坑,那是何人写的,什么人写的!!!
  • 不好,那几个class说不定其余地点也选择了,我得加个限制范围,加个父元素?要不重复再命名个class吧,比较保证。最终只要没问题则代表还好相比敏感,怎么说哥也是混过的,照旧有几斤几两的;如果有难题则意味防不慎防啊,那也太太太坑了呢。

无边栏设计

section.section-main>.inner-center  

无边栏设计

section.section-main>.inner-center  

模块阶段

到了那个时候,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发轫的前缀根本就不够用,于是又乱了,有加二级前缀的,也有另起前缀的。

总之,class的命名真不是一件简单的事,尤其还要兼任可辨别性与可读性。

右侧栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

左边栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

BEM

那些估量地球上做前端的都知晓呢,实在是太火了,所以不用来表达了。优点就是您只管写你自己的,99.99%的几率不会去干掉外人的体制,class实在太长了,能同一那得多高的几率啊。缺点依旧class太长,太长,太长,紧要的事情说三回。一般都记不住自己定义的class,写css的时候只得对着去拷贝。然后最惨痛的就是去修改更新,明明很容易的东西,然后您还要搞个细长的class,那叫一个烦心,想想都懒得出手。

class命名到底有多难

率先,class跟id不平等,class本来就是陈设性用来能够另行利用的,而id才是规划唯一的(倘若听从BEM,class大概也都是绝无仅有的了)。
第二,样式是能够覆盖的,而且先依照权重,再依照定义的先后顺序。也许你花了十分钟安插概念的一个class样式,人家分分钟就给您干掉了,那得多恼火;也许那些页面好好的,跑到另一个页面就跟原先的体裁有了争论。
所以class命名的难就难在既要重复利用,又要幸免样式的顶牛。即使要重复利用,那么自然是越简单越好,越抽象可用的地点越大,太现实了就完蛋了。而如果要防止样式争执。BEM(BEM的相关小说可以参考:

// BEM
.imgslide__item__img{}

// 父元素限定
.imgslide .item .img{}

// 追加class
.img{}
.img--special{}

// 不同页面不同文件
// a.html & a.css
.img{}
// b.html & b.css
.img{}

总的说来,不管有多难,我们仍旧得尝试去解决难点,去搜寻一些原理。

两者栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

双方栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

他山之石

事实上每个命名的发展经历都有其特定的野史意义,也理所当然有其市值。所以吸取之长,弃之短缺就很好了。比喻写不难demo的时候,大家就足以用到混沌阶段的命名,丰硕不难,不需要纠结思考;而原子类越发是一些粗略的体制,如一行代码就足以搞定,起个class名甚是纠结,还不如直接上原子类;至于模块类,说真的应用的境况就愈多了,如布局,js操作类等;而BEM大家一致可借鉴其考虑,如.class.class--name使用--代表特殊化,以界别-

那边大家站在前任的肩头上,试着去开辟一条道路,可以兼顾简洁可读性及可精晓辨别性。当然class的凝练肯定离不开关键词的采取,这里大家先来过一次常见的class关键词。

class命名的迈入历程

至于class的命名,其实跟人名也大抵,假如要想别人看得懂,那根本仍然在于可识别性。到眼前截至class的命名几乎经历了上边多少个关键等级:

  • 亚洲必赢官网 ,混沌阶段,没有规则就是最好的平整
  • 原子类阶段,聚集神龙出现手
  • 模块阶段,以职能分开,添加前缀
  • BEM阶段,规则不变

一定要求

特定要求

常见class关键词:

  •  布局类:header, footer, container, main, content, aside, page,
    section
  •  包裹类:wrap, inner
  • 【亚洲必赢官网】又不精通怎么命名class了。 区块类: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…

有了重在词之后,大家先来制定一些大约的平整

混沌阶段

那个没什么好说的,刚开端学html的都是这么,名字先简单的来,不够再添加1,2,3哪些后缀,或者中国和英国混搭等等,如下:

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;},明明说好的新民主主义革命,却顺手定义了个字体大小。

一向宽度设计

.inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

具备宽度都以像素为单位,那种布局最方便,适用于有些本人内容相比少的页面。
随便浏览器窗口多大,它们的尺寸总是不变,不能充裕利用可用空间。此时可以动用

min-width: 980px 

配合min-width的使用,页面部分内容如三栏布局可以选择百分比来安装宽度(流式布局),完毕当浏览器窗口宽度小于设计稿宽度时,允许现身横向滚动条,页面内容宽度保持不变,可是当浏览器窗口宽度大于设计稿宽度时,页面内容的涨幅保持和浏览器窗口宽度一致

定位宽度设计

.inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

享有宽度都以像素为单位,那种布局最便利,适用于部分自己内容相比较少的页面。
不论浏览器窗口多大,它们的尺码总是不变,不可能丰硕利用可用空间。此时得以行使

min-width: 980px 

配合min-width的选用,页面部分情节如三栏布局可以利用百分比来设置宽度(流式布局),完毕当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,不过当浏览器窗口宽度超越设计稿宽度时,页面内容的小幅保持和浏览器窗口宽度一致

制定不难规则:

  •  以中写道连接,如.item-img
  •  使用五个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的底子上特殊化
  •  状态类直接运用单词,参考上边的第一词,如.active, .checked
  •  图标以icon-为前缀(字体图标接纳.icon-font.i-name办法命名)。
  •  模块选取关键词命名,如.slide, .modal, .tips, .tabs,特殊化采纳地方五个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  •  js操作的类统黑莓上js-前缀
  •  不要超过三个class组合使用,如.a.b.c.d

主要词及规则都有了,现在得以进来本文的骨干的骨干,实战操作。

原子类阶段

那么些关键在于拼凑组合,丰富多的原子类拼成一个完全的样式:

.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.tac
div.pa.tal

那种有多个毛病,第一是稍稍复杂点的体制都要采取过多class组合,第二是假设要修改样式的时候得修改html文件,而不是css样式,而纯静态的页面是很少的,所以只倘诺内外端分离的,由php或后端语言渲染页面的话,改个样式还要公告后端同事去修改文件,那估摸人家得疯掉。

响应式设计

响应式设计

实战操作

以布局出手,大约结构如下:

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,可以相比较方便控制一些基础共有的体裁。

由第多个通过父类控制的方式,我们进入第二个要钻探的标题,层级结构

层级

最符合层级的事例莫过于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.field-img h3.field-tt>a.field-tt-link
p.field-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刚巧构成三层等级。

最后由大家的层级进入大家最后一个标题,怎么样决定样式的限制

体制范围

这里以腾讯课堂的课程详细页左侧栏为例,如下图:

亚洲必赢官网 3

七个区块的底子框架为:

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 收藏
评论

亚洲必赢官网 4

模块阶段

到了那些时候,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,那叫一个烦恼,想想都懒得入手。

代码规范

  • HTML(fex-team)
  • CSS(fex-team)

代码规范

  • HTML(fex-team)
  • CSS(fex-team)

他山之石

实则每个命名的开拓进取经历都有其特定的历史意义,也自然有其市值。所以吸取之长,弃之短缺就很好了。比喻写不难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…

有了重在词之后,大家先来制订一些简约的平整

常见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,error –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, login, register, join, del, add, confirm;message, tab,
    current, note,guide, service, hot, news, download, vote, partner,
    copyright, demo, summary, pages, themes, set, blog, photo,
    guestbook, global; view, status, loading…
  • 对于命名的现实性使用,可以查阅W3school

  • 图表命名与图标命名,index-header-logo,index-footer-logo.

    • iconfont平台

常见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,error –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, login, register, join, del, add, confirm;message, tab,
    current, note,guide, service, hot, news, download, vote, partner,
    copyright, demo, summary, pages, themes, set, blog, photo,
    guestbook, global; view, status, loading…
  • 对此命名的有血有肉采取,可以查阅W3school

  • 图片命名与图标命名,index-header-logo,index-footer-logo.

    • iconfont平台

制订不难规则:

  • 以中写道连接,如.item-img
  • 动用七个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的功底上特殊化
  • 动静类直接采纳单词,参考下边的主要词,如.active, .checked
  • 图标以icon-为前缀(字体图标采取.icon-font.i-name方法命名)。
  • 模块接纳关键词命名,如.slide, .modal, .tips, .tabs,特殊化拔取地方多少个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  • js操作的类统HTC上js-前缀
  • 并非跨越来越多少个class组合使用,如.a.b.c.d

重中之重词及规则都有了,现在能够进入本文的基本的基本,实战操作。

预定规则

  • 第一词间以中写道-连日 以中写道连接,如.item-img
  • 利用三个中划线表示特殊化,如.item-img.item-img–small表示在.item-img的根底上特殊化
  • 气象类直接动用单词,参考上边的根本词,如.active, .checked
  • 图标以icon-为前缀(字体图标选取.icon-font.i-name情势命名),详情应用见CSS
    Icons,可以下载参考Bootstrap的图标语义命名。
  • 模块选择关键词命名,如.slide, .modal, .tips,
    .tabs,特殊化选取地点七个中划线表示,如.imgslide–full, .modal–pay,
    .tips–up, .tabs–simple
  • js操作的类统BlackBerry上js-前缀
  • 决不跨更多个class组合使用,如.a.b.c.d
  • 一个类名,不要超越多少个单词的连接。
  • 核心布局命名前增加该页的命名,如index-banner,index-main。

预订规则

  • 根本词间以中写道-总是 以中写道连接,如.item-img
  • 应用多个中划线表示特殊化,如.item-img.item-img–small表示在.item-img的基本功上特殊化
  • 景况类直接利用单词,参考上边的重大词,如.active, .checked
  • 图标以icon-为前缀(字体图标选取.icon-font.i-name情势命名),详情应用见CSS
    Icons,可以下载参考Bootstrap的图标语义命名。
  • 模块选拔关键词命名,如.slide, .modal, .tips,
    .tabs,特殊化采纳地点八个中划线表示,如.imgslide–full, .modal–pay,
    .tips–up, .tabs–simple
  • js操作的类统中兴上js-前缀
  • 无须跨越八个class组合使用,如.a.b.c.d
  • 一个类名,不要当先多个单词的总是。
  • 主体结构命名前增加该页的命名,如index-banner,index-main。

实战操作

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

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,可以比较便利控制一些基础共有的体制。
由第二个经过父类控制的不二法门,我们进来第两个要探讨的标题,层级结构
层级 最适合层级的例证莫过于ul>li结构了,如下边的结构:

<ul>
    <li>
        <a href="#"><img src="" alt="亚洲必赢官网 5"></a>
        <h3><a href="#"></a></h3>
        <p></p>
    </li></ul>

一般的话大家也有二种方式定义层级,第一种为继承式,第三种为机要词式。

// 继承式
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恰好构成三层等级。
最终由我们的层级进入我们最终一个难题,怎么样支配样式的限定 体制范围
那里以腾讯课堂的科目详细页左边栏为例,如下图:
亚洲必赢官网 6 三个区块的基础框架为:

.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,层级及最后的体裁范围就足以了。

实践应用

  • 经过抬高前缀修饰关键词

    public-header,article-header,index-banner,index-panel
    
  • 由此层级关系格外化类,一般子元素接着父元素的末尾一个单词(继承式)

    ul.card-list 
        li.list-item 
            a.item-img-link>img.item-img 
            h3.item-tt>a.item-tt-link 
            p.item-text
    <ul>
         <li> 
            <a href="#"><img src="" alt="亚洲必赢官网 7"></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>
    

实践应用

  • 通过添加前缀修饰关键词

    public-header,article-header,index-banner,index-panel
    
  • 透过层级关系越发化类,一般子元素接着父元素的末段一个单词(继承式)

    ul.card-list 
        li.list-item 
            a.item-img-link>img.item-img 
            h3.item-tt>a.item-tt-link 
            p.item-text
    <ul>
         <li> 
            <a href="#"><img src="" alt="亚洲必赢官网 8"></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>
    

参考资料

  • 如何鬼,又不知底怎么命名class了
  • HTML整站结构设计
  • 慕课网《从psd到html》
  • Web重构之道

参考资料

  • 怎样鬼,又不精晓怎么命名class了
  • HTML整站结构设计
  • 慕课网《从psd到html》
  • Web重构之道
网站地图xml地图