クラスにもっと標準化された名前を付ける方法_html/css_WEB-ITnose

CSS を書く人なら誰でも次の問題に遭遇すると思います:

おっと、このクラスの名前の付け方が適切ではないようです。競合がある場合はどうすればよいでしょうか...

そして、それを他のものに変更します。 CSS コードを記述するときは、常に疑問が生じます。「このクラスはこの場所でのみ使用されるのか、それとも他の場所でも使用されるのか」ということです。

そこで私たちは次のアプローチを思いつきました:

最後に、クラスを作成する必要がありました。それは単純なものでも、中国語と英語の混合でも構いません。とにかく、それは問題ありません。最終ページに表示されます。

このクラスはここでしか使わないはずなので安心して書けます。オンライン化後。問題がなければ、密かに自分を認めてください、ほら、問題はとても単純です、対立があれば、あなたは感情で満たされます、ねえ、私はそれを変えると不安になります、くそー、深い穴、誰がこれを書いたのですか？はい、誰が書いたのですか？ ！ ！

いいえ、このクラスは他の場所でも使用される可能性があります。制限範囲と親要素を追加する必要がありますか?クラス名を変更したほうが安全です。結局のところ、問題がなければ、それは比較的賢いことを意味します。結局、私はそれに関与しており、まだ数キロあります。問題がある場合は、私が注意を払っていないことを意味します。これは騙しすぎます。

クラスに名前を付けるのは実際には簡単な問題ではないことがわかります。特に区別しやすさと読みやすさを考慮する必要があります。

クラスに名前を付けるのはどのくらい難しいですか?

まず、クラスは再利用されるように設計されていますが、ID は一意であるように設計されています (BEM に従う場合、クラスはほとんどの場合一意です)。

2 番目に、最初は重みに従って、次に定義の順序に従ってスタイルをオーバーライドできます。もしかしたら、クラス スタイルのデザインと定義に 10 分を費やしたのに、他の人が数分でそれを削除してしまうと、非常に面倒になります。このページは問題ないかもしれませんが、別のページに移動すると、元のスタイルと競合します。

したがって、クラスに名前を付ける際の難しさは、スタイルの競合を避けながらクラスを再利用することです。再利用する場合は、シンプルな方が良いのはもちろんですが、抽象的な方がスペースが広くなり、具体的すぎると台無しになってしまいます。スタイルの競合を避けたい場合。 BEM 方法は最も単純です。クラスが一意である場合、競合は発生しません。2 つ目は、単一のクラスでスタイルを定義する代わりに、複数のレベルを作成できる親要素によってスコープを制限することです。差別化を図るためにクラスを追加します。最後に、異なるページには異なるファイルがあり、あなたはあなたのファイルを使用し、私は私のファイルを使用します。

// BEM.imgslide__item__img{}// 父元素限定.imgslide .item .img{}// 追加class.img{}.img--special{}// 不同页面不同文件// a.html & a.css.img{}// b.html & b.css.img{}

つまり、どんなに難しくても、私たちは問題を解決しようとして、いくつかのルールを見つけなければなりません。

クラスの名前の開発の歴史

クラスの名前については、実は人の名前と似ています。他人に理解してもらいたい場合、重要なのは認識しやすさです。これまでのところ、クラスの命名はおそらく次の重要な段階を経てきました:

カオス ステージ、ルールなしが最良のルール

アトミック ステージ、ドラゴンを集めてスキルを披露する

モジュール ステージ、機能ごとに分割、プレフィックスを追加

BEM ステージ、ルールは整っています

カオス ステージ

これについては何も言うことはありません。これは、HTML を学習し始めたばかりの場合に当てはまります。十分でない場合は、最初に 1 を追加します。 、 2、3 またはその他の接尾辞、または中国語と英語などを混ぜて、次のようにします:

h1.titleh2.title2h2.title2-1h2.title2-2div.hddiv.hd-sdiv.hd2div.hd-xiangxi

一言、混乱しすぎます。ルールはまったくありません。どこにでも好きなものを書くことができます。たとえば、 .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

これには 2 つの欠点があります。1 つ目は、少し複雑なスタイルには多くのクラスの組み合わせが必要になることです。 2 つ目は、スタイルを変更したい場合は、CSS スタイルではなく HTML ファイルを変更する必要があり、純粋に静的なページはほとんどないため、フロントエンドとバックエンドが分離され、ページがphp またはバックエンド言語を変更します。スタイルごとにファイルを変更するようにバックエンドの同僚に通知しなければならない場合は、おそらく気が狂ってしまうでしょう。

モジュール段階

現時​​点では、CSS の開発に何年も費やしてきたため、ページの複雑さは数倍になっています。これらの計画外の混乱だけではまったく不十分です。クラスはすべて同じに見えます。マーク 1、2、3 がいくつあるのかはわかりませんが、その違いが何なのかもわかりません。また、アトミック クラスは頻繁な変更、調整、更新には適しておらず、すべての更新には協調的な努力が必要です。 。そこで、関数ごとに分けたクラス命名規則が登場しました

// 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-为前缀（字体图标采用.icon-font.i-name方式命名）。

 模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple

 js操作的类统一加上js-前缀

 不要超过四个class组合使用，如.a.b.c.d

关键词及规则都有了，现在可以进入本文的核心的核心，实战操作。

实战操作

以布局入手，大概结构如下：

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>    <li>        <a href="#"><img src="" alt=""></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正好构成三层等级。

最后由我们的层级进入我们最后一个问题，如何控制样式的范围

样式范围

这里以腾讯课堂的课程详细页右边栏为例，如下图：

三个区块的基础框架为：

.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