エレガントで耐久性のある CSS コードを記述するにはどうすればよいですか? CSS 命名に関するヒントを共有します!

CSS をしばらく使ったことがある人なら、継承、特異性、名前付けが最も対処が難しいものの一部であることをご存知でしょう。すべての CSS はグローバルであるため、コードベースが大きくなるにつれて、スタイルが互いに競合し、意図しない副作用が発生するのを防ぐことがますます困難になります。次の記事では、コードをエレガントで魅力的なものにするための CSS 命名に関するヒントをいくつか紹介します。

CSS の命名 - BEM

BEM とは

#BEM は CSS の命名規則です。 [推奨学習: css ビデオ チュートリアル ]

BEM は「ブロック、要素、修飾子」の略です。

セレクターでは、次の 3 つの記号は拡張関係を表します:

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

BEM サンプルの比較を使用します

Block

以下の例のように、li.item は list

/* 常规写法和BEM写法相同 */
.list

Element

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常规写法 */ 
.list{} 
.list .item{} 

/* BEM写法 */ 
.list{} 
.list__item{}

## のサブ要素です。 #Modifier

「モディファイア」は、ブロックの特定の状態として理解できます。

/* 常规写法 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEM写法 */   
  <ul class="list">
    <li class="list__item_active">
      Pricing
    </li>
    <li class="list__item">Contact</li>
  </ul>

rree

BEM の利点

##特異性の問題を取り除く

• 継承問題を修正
• 命名について心配するのはやめましょう

CSS 命名に関するいくつかの原則

##長い名前よりも短い名前の方が優れています

名前を短くすると記述時間が短縮されるので、css ファイルのサイズも小さくなります。たとえば、次の例は次のとおりです。

/* 常规写法 */ 
.list{} 
.list .item{} 
.list .item.active{} 

/* BEM写法 */ 
.list{} 
.list__item{}
.list__item_active{}

結合した名前付けは単一の名前付けよりも優れています

//  推荐
.some-intro{...}

// 不推荐
.some-introduction{...}

属性指向の名前付けとセマンティックな名前付け

属性指向の名前付けとは、セレクターの名前付けが特定の CSS スタイルに従い、プロジェクト、ページ、モジュールとは何の関係もないことを意味します。たとえば、より古典的なクリアフローティングクラス name.clearfix:

// 不建议
.header{...}

//推荐
.cs-header{...}

セマンティック指向の命名は、アプリケーション要素が配置されているコンテキストに従って命名されます。例:

.clearfix:after { content : ''; display: table; clear: both; }

上記の 2 つの命名方法には、それぞれ長所と短所があります:

1. 属性指向

利点

: CSS の再利用 高効率、最高のパフォーマンス、プラグ アンド プレイ、便利で高速、HTML と CSS ファイル間の切り替えにかかる時間を大幅に節約できるため、開発も非常に高速になります。
• デメリット
: 単一属性のため適用シーンが限定され、また、簡単に使えるため多用されやすく、メンテナンスコストが高くなります。
• 2. セマンティクス指向

利点

幅広いアプリケーション シナリオがあり、非常に絶妙なレイアウト効果を実現でき、 Expand;
• 欠点
: 10 ピクセル間隔であっても、すべての HTML に名前を付ける必要があるため、コードが長く、開発効率は平均的です。このため、多くの開発者は、タグ セレクターを直接使用するか、単純なクラス名を選択して親子関係を通じてスタイルを定義することを選択することになり、メンテナンスの問題がさらに悪化します。
名前の概要の推奨事項

ステータス

.header { background-color: #333; color: #fff; }
.logo {font-size: 0; color : transparent;}

レイアウト

前一个    prev
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

共通部品

文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container

#コンポーネント

列表    list
列表项  item
表格    table    
表单    form
链接    link
标题    caption/heading/title
菜单    menu
集合    group
条      bar
内容    content    
结果    result

セマンティック ウィジェット

按钮        button(btn)
字体        icon
下拉菜单    dropdown
工具栏      toolbar
分页        page
缩略图      thumbnail
警告框      alert
进度条      progress
导航条      navbar
导航        nav    
子导航      subnav
面包屑      breadcrumb(crumb)    
标签        label
徽章        badge
巨幕        jumbotron
面板        panel
洼地        well
标签页      tab
提示框      tooltip
弹出框      popover
轮播图      carousel
手风琴      collapse 
定位浮标    affix

#機能的ウィジェット

品牌        brand
标志        logo
额外部件    addon
版权        copyright
注册        regist(reg)
登录        login
搜索        search    
热点        hot
帮助        help
信息        info
提示        tips
开关        toggle
新闻        news
广告        advertise(ad)
排行        top    
下载        download

推奨のネーミング Web サイト

codelf: https://unbug.github.io/codelf 参考ドキュメント:

1. 「CSS 選択の世界」 by Zhang Xinxu

2. https://www.cnblogs.com/qianxiaox/p/13816077.html

(学習ビデオの共有:

ウェブフロントエンド

)

以上がエレガントで耐久性のある CSS コードを記述するにはどうすればよいですか? CSS 命名に関するヒントを共有します!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。