属性指向の CSS 命名_html/css_WEB-ITnose

フロントエンド開発を始めてから、ページを開発するときに開発効率に大きく影響する問題が常にあることに気付きました。この問題は、主に CSS クラスの名前を指します。セレクター。この問題は主に以下の点に反映されています。まず、一部のコンテンツの名前を考えることはできません。一般に、名前付けでは常にセマンティクスが考慮されるため、他の人がこの CSS クラスを見たときに、その CSS クラスの機能がどのコンテンツに関するものであるかがわかります。ただし、Web コンテンツの複雑さと多様性により、各部分に適切な名前を付けられることを保証するのは困難です。たとえ最終的に名前を考え出すことになったとしても、その名前が適切であるかどうかについて疑問が生じるでしょう。この種のもつれが存在し、最も恐ろしいのは、この名前付けのプロセスが非常に困難な精神活動であり、多くの脳細胞を消費することです。第 2 に、名前付けは意味論的なものである可能性があるためです。たとえば、Web ページのコンテンツにはスタイルを記述するために .ti​​tle が使用されます。このタイトルには、現時点では別のコンテンツが含まれています。 Web ページの .desc という名前は、このタイトルと同じスタイルにする必要があるかもしれませんが、他のコンテンツが配置されている Web ページの場所を考慮すると、現時点では .desc という名前を付ける方が適切であると考えています。セマンティックな名前付けを好む人は、必ずそのコンテンツに対して別の CSS クラス記述を作成し、タイトルのスタイルをコピーします。その結果、CSS ファイルには、名前が異なるだけの 2 つの同一のスタイル ルールが存在します。繰り返した。

この問題を解決する方法は、属性指向の CSS 命名を使用することです。 実際には名前を考えることができず、名前を付ける必要がなく、単一の CSS 属性または 1 つだけで記述できるもの。単一の CSS 属性の組み合わせ。すべての部分で、属性指向の CSS クラスがスタイルの制御に使用されます。これにより、作業効率が向上するだけでなく、最も重要なことは、CSS 命名の混乱から完全に解放されることです。脳細胞が失われると、とても大変なことになります。

まず最初に、属性指向の CSS 命名というアイデアは、Zhang Xinxu のブログから来たものではないことを述べておきたいと思います。当時私は CSS の名前付けの問題に悩んでいたところ、彼の記事を 2 つ見つけました。CSS の名前付けとサイト全体の CSS の構成方法を再理解するのにとても役立ちました。 :

合理化された効率的な CSS 命名ガイドライン/方法
Web サイト CSS の構成方法
まず彼の記事を読んでこの命名アイデアの起源を理解してから、私の要約と応用例をいくつか確認してください。

ネーミングメソッド

このメソッドは、簡単に言うと、css 属性の略称を CSS のクラス名として直接使用することです。これを使用すると、1 つまたは複数の CSS クラスを使用することで、スタイルを制御する目的が達成されます。そのような略語。たとえば、Web ページ内に、サイズが 12 ピクセル、行の高さが 20 ピクセル、段落の前後の間隔がそれぞれ 10 ピクセルと 15 ピクセルの中央揃えのテキストの段落である Web ページ コンテンツがある場合、これらの単純な属性クラスを定義できます:

.tc {text-align: center;}.f12 {font-size: 12px;}.lh20 {line-height: 20px;}.mt10 {margin-top: 10px;}.mtb15 {margin-bottom: 15px;}

in ページで使用する場合は、上記の CSS 属性クラスを組み合わせるだけです:

<p class="tc f12 lh20 mt10 mb15">…</p>

これは、この属性命名メソッドの具体的な使用方法です。

CSS には、この方法で名前を付けることができる属性が多数あります。 Zhang Xinxu のブログでは、彼は自分のメソッドをオープンソース CSS ライブラリにまとめました: https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css。私たちはまず彼のライブラリから、これらのさまざまな CSS 属性クラスをどのように編成しているかを学び、次にこれらの問題のいくつかについて議論します。

これは、属性指向の命名を使用する彼のオープンソース ライブラリ内のすべての CSS クラスです (次のコードは、この記事を読みやすくするためにのみ引用されています。実際の作業で使用したい場合は、Zhang に従うのが最善です) Xinxu 自身の github またはブログ。彼は常に自分のことを最適化するからです):

/* display */.dn{display:none;}.di{display:inline;}.db{display:block;}.dib{display:inline-block;}div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using 'inline_any' instead *//* height */.h0{height:0;}.h16{height:14px;}.h16{height:16px;}.h18{height:18px;}.h20{height:20px;}.h22{height:22px;}.h24{height:24px;}.h30{height:30px;}/* width *//* fixed width value */.w20{width:20px;}.w50{width:50px;}.w70{width:70px;}.w100{width:100px;}.w120{width:120px;}.w140{width:140px;}.w160{width:160px;}.w180{width:180px;}.w200{width:200px;}.w220{width:220px;}.w250{width:250px;}.w280{width:280px;}.w300{width:300px;}.w320{width:320px;}.w360{width:360px;}.w400{width:400px;}.w460{width:460px;}.w500{width:500px;}.w600{width:600px;}.w640{width:640px;}.w700{width:700px;}/* percent width value */.pct10{width:10%;}.pct15{width:15%;}.pct20{width:20%;}.pct25{width:25%;}.pct30{width:30%;}.pct33{width:33.3%;}.pct40{width:40%;}.pct50{width:50%;}.pct60{width:60%;}.pct66{width:66.6%;}.pct70{width:70%;}.pct75{width:75%;}.pct80{width:80%;}.pct90{width:90%;}.pct100{width:100%;}/* line-height */.lh0{line-height:0;}.lh16{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}.lh30{line-height:30px;}/* margin */.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml30{margin-left:30px;}.mr1{margin-right:1px;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr30{margin-right:30px;}.mt1{margin-top:1px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt30{margin-top:30px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}/* margin negative */.ml-1{margin-left:-1px;}.mr-1{margin-right:-1px;}.mt-1{margin-top:-1px;}.mb-1{margin-bottom:-1px;}.ml-3{margin-left:-3px;}.mr-3{margin-right:-3px;}.mt-3{margin-top:-3px;}.mb-3{margin-bottom:-3px;}.ml-20{margin-left:-20px;}.mr-20{margin-right:-20px;}.mt-20{margin-top:-20px;}.mb-20{margin-bottom:-20px;}/* padding */.p0{padding:0;}.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p15{padding:15px;}.pl15{padding-left:15px;}.pt15{padding-top:15px;}.pr15{padding-right:15px;}.pb15{padding-bottom:15px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}.p30{padding:30px;}.pl30{padding-left:30px;}.pt30{padding-top:30px;}.pr30{padding-right:30px;}.pb30{padding-bottom:30px;}/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/.bdc{border:1px solid #ccc;}.blc{border-left:1px solid #ccc;}.brc{border-right:1px solid #ccc;}.btc{border-top:1px solid #ccc;}.bbc{border-bottom:1px solid #ccc;}.bdd{border:1px solid #ddd;}.bld{border-left:1px solid #ddd;}.brd{border-right:1px solid #ddd;}.btd{border-top:1px solid #ddd;}.bbd{border-bottom:1px solid #ddd;}.bde{border:1px solid #eee;}.ble{border-left:1px solid #eee;}.bre{border-right:1px solid #eee;}.bte{border-top:1px solid #eee;}.bbe{border-bottom:1px solid #eee;}/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */.bgwh{background-color:#fff;}.bgfb{background-color:#fbfbfb;}.bgf5{background-color:#f5f5f5;}.bgf0{background-color:#f0f0f0;}.bgeb{background-color:#ebebeb;}.bge0{background-color:#e0e0e0;}/* safe color */.g0{color:#000;}.g3{color:#333;}.g6{color:#666;}.g9{color:#999;}.gc{color:#ccc;}.wh{color:white;}/* font-size */.f0{font-size:0;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f18{font-size:18px;}.f20{font-size:20px;}.f24{font-size:24px;}.f28{font-size:28px;}/* font-family */.fa{font-family:Arial;}.ft{font-family:Tahoma;}.fv{font-family:Verdana;}.fs{font-family:Simsun;}.fl{font-family:'Lucida Console';}.fw{font-family:'Microsoft Yahei';}/* font-style */.n{font-weight:normal; font-style:normal; white-space: normal;}.b{font-weight:bold;}.i{font-style:italic;}/* text-align */.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}.tj{text-align:justify;}/* text-decoration */.tdl{text-decoration:underline;}.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}/* letter-spacing */.lt-1{letter-spacing:-1px;}.lt0{letter-spacing:0;}.lt1{letter-spacing:1px;}/* white-space */.nowrap{white-space:nowrap;}/* word-wrap */.bk{word-wrap:break-word;}/* vertical-align */.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vb{vertical-align:bottom;}.vt{vertical-align:top;}.v-1{vertical-align:-1px;}.v-2{vertical-align:-2px;}.v-3{vertical-align:-3px;}.v-4{vertical-align:-4px;}.v-5{vertical-align:-5px;}/* float */.l{float:left;}.r{float:right;}/* clear */.cl{clear:both;}/* position */.rel{position:relative;}.abs{position:absolute;}/*z-index*/.zx1{z-index:1;}.zx2{z-index:2;}/* cursor */.poi{cursor:pointer;}.def{cursor:default;}/* overflow */.ovh{overflow:hidden;}.ova{overflow:auto;}/* visibility */.vh{visibility:hidden;}.vv{visibility:visible;}/* opacity */.opa0{opacity:0; filer:alpha(opacity=0);}/* zoom */.z{*zoom:1;}

まず第一に、彼のコードのこの部分には、表示、高さ、マージンなど、Web 開発で一般的に使用される CSS 属性のほとんどが含まれています。 、パディング、境界線、色、フォントサイズなど。属性クラスの命名には、基本的に属性と属性値の略称が使用されます。他に説明できることは次のとおりです。

1) 固定値の属性クラス定義に加えて、幅にはパーセンテージ属性のクラス定義も含まれます。結局のところ、これは実際の作業でよく使用されます。

2) マージン、ボーダー、 padding 上下左右に関する属性を含むため、上下左右の属性クラスも用意し、使い分けを容易にします。

さらに、彼のコードにはブラウザ互換性に関する考慮事項があるため、自分の作品で使用する場合は、彼のコードを参照するのが最善です。

この方法を使用する前は、その保守性のほうを心配していました。これらの属性クラスの多くには .f12{font-size: 12px} などの属性値が含まれるため、対応する属性を変更する場合は、html 要素のクラス属性値に f12 などの css 属性クラス名が必ず含まれます。価値観、どうやってやるか？次に、3 つの場所を変更する必要があります。1 つ目は属性値が定義されている場所、2 つ目は属性クラス名が定義されている場所、そして最後にそれが HTML で使用されている場所です。当時この問題について考えたとき、この方法は現実的ではないと感じました。実際の作業では、UI 担当の同僚がデザインを何度も変更したためです。その場合、この属性命名クラスが使用される場所はどこであってもです。ページを頻繁に変更してください。

しかし、後でこの命名方法を使用しなくても、UI調整設計図の状況を変えることはできず、設計図が変更される限り、HTMLの結果やCSSクラスさえも変更できないことに気づきました。セマンティックな名前付けを使用するものは変更する必要がありますが、実際には属性を使用してクラスに名前を付ける方法よりも問題のレベルが深刻なので、最終的にこの方法をプロジェクトで試し始めました。実際、特にテキストの組版、垂直レイアウト、段組レイアウト、およびパーセンテージ レイアウトに関しては、非常に使いやすいことがわかりました。また、上記のメンテナンスの問題も非常に少ないです。この問題を解決するには 2 つの方法があります:

1) 最初に f12 を使用し、その後フォント サイズを 14px に変更するように設計した場合は、別の f14 を追加し、元の HTML 内の f12 を置き換えるだけです。 f14 なので、f14 に変更してください。他でf12を使用していない場合は、再度f12を削除することを検討します。

2) 最初に f54 が使用されていた場合、この属性クラスは汎用ではないため、f54 を必要な属性クラス (f52 など) に直接置き換えることを検討することがあります。

このテキストセクションの最後に、この使用方法とメンテナンスの問題の補足的な処理についての私自身の提案も示します。ここで、Zhang Xinxu のコードを見て、個人的な観点から、プロジェクトにおける私の実際の状況と組み合わせて、改善する必要がある領域について説明します。

1) 固定値を使用する一部の属性クラスは冗長または欠落しています。たとえば、高さ: 28px には .h28 がなく、.w100 から .w700 は使用できない可能性があります

2) 色に関連する可能性があります。それらのほとんどは必ずしもプロジェクトの要件を満たしていない可能性があり、特に仕様を指定せずに作成された種類のデザイン図面では、肉眼では同じ色に見えても、同じバージョンが別のページに表示されることがあります。よりカラフルなデザインでも、さまざまな色が使用されます。これらの属性クラスには、境界線、背景、色が含まれます。もちろん、純黒と純白でも統一できます。結局のところ、この 2 色はどの Web サイトでも基本的に使用されます。

3) font-family などの冗長な属性クラスもあります。プロジェクトではあまり使用しないため、font-family は別の場所で定義されているため、ここでは必要ありません。もちろん、これがまだ役立つと思われる場合は、保持することを検討できます。

4) border-radius や flex などの他の CSS 属性クラスを追加することも検討できます。 Border-radius は現在非常に一般的に使用されており、モバイル側でも flex を使用できます。これは、プロジェクトの実際の状況に基づいてゆっくりと増やす必要があります。

上記に基づいて、この属性指向の命名方法に対する私の提案は次のとおりです:

1) まず第一に、Zhang Xinxu のコードに基づいている必要があります

2) 高さ、行の高さについては、 font- サイズの 3 つの属性を属性クラスに分割するときは、
.h0、.h18、.h20、.h22、.h24、.h26、など、ステップ サイズ 2 の算術分布を使用して定義するようにしてください。 .h28、.h30、.h32、.h34、.h36、.h38、.h40; .lh18、.lh20、.lh22、.lh24、.lh26、.lh28、.lh30、.lh32、.lh34、. lh36, .lh38 , .lh40 ;
.f12 , .f14 , .f16 , .f18 , .f20 , .f22 , .f26 , .f28 , .f30 ; 2 つ目は、レイアウトを容易にするために各サイズを偶数にすることです。

3) 幅は 100 以内の固定値で、ステップ サイズ 10 の算術分布シーケンスを定義することを検討できます:

.w0、.w10、.w20、.w30、.w40、.w50、.w60、 .w70、.w80、.w90、.w100

実際に使用するときに他の固定値の属性クラスを追加できます
パーセント幅の場合は、10% から 100% までの値を定義し、1 /3 をターゲットにできます。 、1/4、1/5、1/6 も個別に定義されています。これらは一般的に使用されるレイアウト比率であるため、事前に定義することを検討できます。

4) マージンとパディングの属性クラスの一部は冗長または欠落している可能性がありますが、事前に定義しすぎることはできません。実際の使用中にそれらを追加することを検討できます。

5）border，background-color以及color可以考虑留下。由于这几个跟颜色有关，所以可以把设计图中最常用的几种颜色也抽出来分别定义追加进去，假如设计师比较有经验的话，做出来的东西就会比较规范，尤其是在通用的颜色这一块，不会搞出很多的颜色出来。在zxx.lib.css中，已定义的border,background-color还有color都是安全色，如果是设计师的颜色，其实也能定义成属性类，比如#7c7c7c，就可以定义成.c7c,bg7c,bd7c。

6）可以根据项目的实际情况增加border-radius以及flex等属性类。定义方式完全跟其它属性一样，如flex的：

.df {  display: flex;}.dif {  display: inline-flex;}.fdr {  flex-direction: row;}.fdrr {  flex-direction: row-reverse;}.fdc {  flex-direction: column;}.fdcr {  flex-direction: column-reverse;}.fwn {  flex-wrap: nowrap;}.fww {  flex-wrap: wrap;}.fwr {  flex-wrap: wrap-reverse;}.jcfs {  justify-content:  flex-start;}.jcfe {  justify-content:  flex-end;}.jcc {  justify-content:  center;}.jcsb {  justify-content:  space-between;}.jcsa {  justify-content:  space-around;}.aifs {  align-items: flex-start;}.aife {  align-items: flex-end;}.aic {  align-items: center;}.aib {  align-items: baseline;}.ais {  align-items: stretch;}.acfs {  align-content: flex-start;}.acfe {  align-content: flex-end;}.acc {  align-content: center;}.acsb {  align-content: space-between;}.acsa {  align-content: space-around;}.acs {  align-content: stretch;}.fxa {  flex: auto;}.fxn {  flex: none;}.fx1 {  flex: 1;}.fx2 {  flex: 2;}.fx3 {  flex: 3;}.fx4 {  flex: 4;}.fx5 {  flex: 5;}.fx6 {  flex: 6;}

以上这部分flex的属性类需结合auto-prefix这种工具来使用，因为有兼容性问题，需要统一添加前缀。

7）关于这些面向属性的css类组织：
第一，按照前面的这些建议，在张鑫旭的代码的基础上，调整成自己的项目所需之后，就应该把这个代码单独存放起来，作为一个像bootstrap这样的单独的库来使用；
第二，在实际工作过程中，如果要增加新的css属性类，只有在这个属性类有公用的价值，才能添加到第一步的公共属性类库里面去，否则的话，就只能在当前页面的main css里面去写。

8）最后，就是在坚持没有重复的代码前提下，根据实际情况去追加相关的css属性类。有公用性的就加到单独的库里，没公用性的话就追加到页面的main css里。

这些建议，也只是我个人的使用经验总结，有比较多的个人想法，如果觉得不对或者有疑问的话，欢迎私信或者评论交流。本文最重要的目的是分享这种面向属性的命名方法，我相信肯定会有朋友能够看到这个方法的价值的。

最后在张鑫旭的代码中，还有一部分代码，定义了很多简单常用的css类，比如浮动，浮动清除等等：

/* 块状元素水平居中 */.auto{margin-left:auto; margin-right:auto;}/* 清除浮动*/.fix{*zoom:1;}.fix:after{display:table; content:''; clear:both;}/* 基于display:table-cell的自适应布局 */.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}/* 双栏自适应cell部分连续英文字符换行 */.cell2{overflow:hidden; _display:inline-block;}/* 单行文字溢出虚点显 示*/.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}/* css3过渡动画效果 */.trans{    -webkit-transition:all .15s;                transition:all .15s;}/* 大小不定元素垂直居中 */.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}/* 加载中背景图片 - 如果您使用该CSS小库，务必修改此图片地址 */.loading{background:url(about:blank) no-repeat center;}/* 无框文本框文本域 */.bd_none{border:0; outline:none;}/* 绝对定位隐藏 */.abs_out{position:absolute; left:-999em; top:-999em;}.abs_clip{position:absolute; clip:rect(0 0 0 0);}/* 按钮禁用 */.disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;}/*inline-block与float等宽列表*/.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}.inline_two, .float_two{width:50%; *width:49.9%;}.inline_three, .float_three{width:33.33333%; *width:33.3%;}.inline_four, .float_four{width:25%; *width:24.9%;}.inline_five, .float_five{width:20%; *width:19.9%;}.inline_six, .float_six{width:16.66666%; *width:16.6%;}.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

这些代码也可以根据实际情况稍微调整，大部分在实际工作中都有使用到的场景，这里仅作引用介绍，因为使用起来也很简单的。

应用实践

为了说明这个命名方法的作用，我做了一个demo，以博客园博客列表页来说明如何应用这种命名方法。先来看博客列表页的结构：

可以看到这个列表页其实是用到了很多语义化的命名的css类的，假如要用面向属性的命名方法来定义，就会变成下面这个样子：

实际效果如下：

相关源码可访问以下链接查看：

http://liuyunzhuge.github.io/blog/css_name/html/demo.html

在以上这个实践过程中，并没有所有的样式都使用这种命名方法，主要的原因是单纯的属性命名对无法对伪类或者伪元素进行很好的样式控制，而正好博客园列表页中的每个链接的样式都不一样，所以没办法统一。这也正是面向属性的命名方法的一种限制情形。

注意事项

虽然本文的目的是在推崇这种面向属性的命名方法，但是你从文中的内容也可以看到，这种方法是有针对性的，前面一开始介绍的时候就说过：

采用面向属性的css命名，把那些我们实在想不出名字的，而且没有必要起名字的，并且可以只用单一的css属性或者组合的单一css属性来描述的部分，通通都用面向属性的css类来控制样式

使用这个方法的最大前提就是没有必要起名字，并且能够用组合的单一属性来描述的内容，就可以这种方法来加速页面布局的工作。像前面应用实践介绍过的那种情形一样，当你需要配合伪类，伪元素或者背景图片的时候，就不太适合用这种方法。

在面向属性的命名方法不能使用的时候，有另外两种css的命名或者说组织方式可以使用：

1）语义化的命名，在整个页面，语义化的css命名还是不可获缺的一部分，尤其是那些划分页面模块的，比如.header  .footer .logo等等，抽象公共样式或者公共组件的，如.dropdown，.btn，.tab等等。这些是css模块化，代码重用的比较大的组织单位，如果把它们也拆分了，会使得整个站点的css结构非常的复杂，那样的话还不如直接用style呢；

2) 階層的な名前付けを使用し、より直接的なサブ要素セレクターを使用します。Zhang Xinxu のブログでは CSS での階層化を推奨していませんが、名前を付けたくない場合は、属性指向の名前付け方法を使用して問題を解決できない場合があります。この問題を解決するには、階層を使用することを検討してください。ブートストラップのソース コードでは、ナビゲーション、ドロップダウン、タブなどの多くの CSS コンポーネントが、まず名前空間として機能します。多数のより深い子孫要素が影響を及ぼします。ただし、レイヤーの数は 3 レイヤーを超えないようにしてください。そうしないと、HTML 構造の変更が CSS コードの構造に影響します。

この記事の概要

この記事は主に属性指向の CSS 命名方法のアイデアを広めるために、実際の作業で多くの不要な CSS 命名を減らすのに役立ちましたので、それを共有するためにこの記事を書きました。この記事には、私が仕事で生み出したアイデアも多数含まれていますが、必ずしもあなたの実際のニーズを満たすとは限りません。興味があれば、Zhang Xinxu の 2 つの記事を読んで、自分のアイデアを要約することもできると思います。読んでいただきありがとうございます:)