又不理解怎么命名class了
分类:前端技术

怎么样鬼,又不驾驭怎么命名class了

2015/10/25 · CSS · class

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

信任写css的人都会遇见下边的标题:

  •  糟糕,怎么命名这一个class,好像不太方便,假如冲突了如何是好,要不要规划成通用一点…
  •  而改别人css代码的时候则会一向有个难题:这一个class到底是只在此个地点用了,依旧别的地方都用了?

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

  •  最终到底被逼出了个class,简洁也好,中国和英国混合着搭配也罢,瞅着多头雾水也没涉及,反正最终页面显示出来的。
  •  那些class应该是只有那一个地点使用,作者得以放心写。上线之后。如若没难题,则偷偷自己欣赏,看吗难题就好像此轻松,分分钟消除啊;要是冲突了,则最为感叹,哎,改的时候本人就隐约不安啊,妈蛋,深坑,那是何人写的,何人写的!!!
  •  倒霉,那些class说不定别的地点也采纳了,小编得加个限制范围,加个父成分?要不重复再命名个class吧,相比保障。最终只要没难题则意味着辛亏比较灵敏,怎么说哥也是混过的,如故有几斤几两的;若是有标题则象征防不慎防啊,那也太太太坑了吧。

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

纲要

  • 安插布局,划分全体布局
  • 剧情区域,从全体到有的,局地中的通用部分,依据上下文应用样式
    • 公共底部(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>
      
  • 相称和细节的拍卖(放大百分百上述,工夫看见端倪)

    • 反思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{}

同理可得,不管有多难,大家依然得尝试去消除难题,去搜索一些法规。

全部布局

图片 1

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

class命名的进化进程

至于class的命名,其实跟人名也大半,若是要想别人看得懂,那根本照旧在于可识别性。到最近停止class的命名大致经历了下边多少个关键等第:

  •  混沌阶段,未有法则便是最棒的平整
  •  原子类阶段,集中神龙现身手
  •  模块阶段,以效果分开,增多前缀
  •  BEM阶段,准绳不改变

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

原子类阶段

其一关键在于拼凑组合,丰硕多的原子类拼成贰个完全的体制:

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

无边栏设计

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最初的前缀根本就非常不够用,于是又乱了,有加二级前缀的,也许有另起前缀的。

左边栏设计

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

BEM

以此测度地球上做前端的都精晓吗,实在是太火了,所以不用来分解了。优点正是你只管写你和睦的,99.99%的可能率不会去干掉别人的样式,class实在太长了,能长期以来那得多高的可能率啊。劣势依然class太长,太长,太长,首要的政工说叁次。常常都记不住本身定义的class,写css的时候只得对着去拷贝。然后最难受的就是去修改更新,明明非常粗大略的事物,然后您还要搞个细长的class,那叫二个压抑,想想都无心入手。

两个栏设计

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

他山之石

实质上每一个命名的进化经历皆有其一定的野史意义,也当然有其股票总值。所以摄取之长,弃之缺少就很好了。比喻写简单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…

有了主要词之后,大家先来制订一些大约的平整

恒定宽度设计

.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-为前缀(字体Logo接纳.icon-font.i-name艺术命名)。
  •  模块选择关键词命名,如.slide, .modal, .tips, .tabs,特殊化选用地点两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  •  js操作的类统Moto矢岛健一上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,能够比较有利调节一些基础共有的体制。

由第多少个经过父类调节的法子,我们步向第多少个要研究的题目,层级结构

层级

最适合层级的事例莫过于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.田野同志-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课堂的科目详细页左侧栏为例,如下图:

图片 2

四个区块的基本功框架为:

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

图片 3

比例规划

代码标准

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

命名约定与运用

常见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

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

    • iconfont平台

预订准绳

  • 根本词间以中写道-总是 以中写道连接,如.item-img
  • 使用两在这之中划线表示特殊化,如.item-img.item-img--small表示在.item-img的底子上特殊化
  • 情景类直接运用单词,参考上边的尤为重要词,如.active, .checked
  • Logo以icon-为前缀(字体Logo接纳.icon-font.i-name方式命名),详细情形应用见CSS Icons,能够下载参谋Bootstrap的Logo语义命名。
  • 模块选择关键词命名,如.slide, .modal, .tips, .tabs,特殊化选拔地点两当中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  • js操作的类统小米上js-前缀
  • 并非超过多个class组合使用,如.a.b.c.d
  • 贰个类名,不要赶上四个单词的连年。
  • 中央结构命名前拉长该页的命名,如index-banner,index-main。

执行应用

  • 因而抬高前缀修饰关键词

    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="图片 4"></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>
    

参谋资料

  • 怎么鬼,又不明了怎么命名class了
  • HTML整站结构划虚构计
  • 慕课网《从psd到html》
  • Web重构之道

本文由pc28.am发布于前端技术,转载请注明出处:又不理解怎么命名class了

上一篇:在行内元素前注入一个换行,right的使用说明 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 又不理解怎么命名class了
    又不理解怎么命名class了
    怎么样鬼,又不驾驭怎么命名class了 2015/10/25 · CSS ·class 原稿出处:结一(@结一w3cplus)    信任写css的人都会遇见下边的标题:  糟糕,怎么命名这一个
  • 在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行 2016/06/28 · CSS ·行内元素 原文出处: ChrisCoyier   译文出处:众成翻译    我遇到了一个小问题,我有一个 span 在 header 中,而
  • 标签的用法,标签区别
    标签的用法,标签区别
    考虑 pre 标签的样式 2016/06/02 · CSS ·标签 原文出处: ChrisCoyier   译文出处:众成翻译    你可能正在使用 pre 标签。这是一个 HTML中非常特别的标签,它
  • 异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript进化史 2015/10/14 · CSS 本文由 伯乐在线 -cucr翻译,唐尤华校稿。未经许可,禁止转载! 英文出处:GergelyNemeth。欢迎加入翻译组。 async函数近在
  • Canvas完毕监察和控制种类页面呈现,json工控风机
    Canvas完毕监察和控制种类页面呈现,json工控风机
    传说 HTML5 Canvas 达成客车站监察和控制 2017/11/21 · HTML5 ·Canvas 初稿出处: hightopo    陪伴国内经济的长足发展,大家对安全的渴求更为高。为了防卫下列景