CSSクラスの命名規則

Webページには、2つのコントロールブロック（プライマリとセカンダリ）があり、ほとんどの人が使用するクラス名は何ですか？

選択肢1：

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

選択肢2：

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>
62
追加された
ビュー: 4
源
ro ru fr es pt de hi bn ar uz tr
関連する stackoverflow.com/questions/939909/…
追加された 著者 Adrien Be, 源

4 答え

質問への直接的な答えは、Curtのこのすぐ下のものです。

CSSクラスの命名規則に興味があるなら、 BEM （ブロック、要素、修飾子）という非常に便利な規則を検討することをお勧めします。

更新

詳細はこちらをご覧ください - http://getbem.com/naming/ - これは新しいバージョンです以下の答えは廃止されました。

主な原則：

  • ページは独立したブロックから構築されます。ブロックは、クラス名が "b-ページ"や "b-ログインブロック"や "b-コントロール"のような "b-"接頭辞を持つHTML要素です。

  • すべてのCSSセレクタはブロックに基づいています。 "b-"で始まっていないセレクタはありません。

良い：

.b-controls .super-control { ... }

悪い：

.super-control { ... }
  • あなたがすでに持っているブロックに似ている別のブロック（別のページにあるかもしれない）が必要な場合は、新しいものを作成するのではなく、ブロックに修飾子を追加する必要があります。


Example:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

修飾子付き：

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

次に、CSSでの変更を指定できます。

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

ご不明な点がございましたら、お気軽にご相談ください。私は BEM を2年間使ってきましたが、これはこれまでに会ったことのないベストコンベンションだと私は主張します。

76
追加された
源
@IvanIvanov私はJSのIDを使用します。その場合、心に留めておくべきことは何ですか？
追加された 著者 0fnt, 源
@ClaudioLudovicoPanetta ids（正しいべきhtml id属性）もまた、クラスよりも具体的です。つまり、別のIDを使用しない限り、スタイルシート内のどこにあるかにかかわらず何かをオーバーライドします。または256のネストされたクラス） - あなたがcssについて理解できる最も重要なことの1つは、特異性とそのトラップを避ける方法です。少し高度なブログの場合は例外的な記事です： csswizardry.com/2014/07/hacks-for-dealing-with-specificity
追加された 著者 Toni Leigh, 源
id = ""はどうですか？それらの命名規則はありますか？
追加された 著者 Claudio Ludovico Panetta, 源
@イワンイワノフあなたは不利な点についてもっと教えていただけますか？私はCSSで本当にノブです。私が学ぶことができるいくつかのリンクさえ：D
追加された 著者 Claudio Ludovico Panetta, 源
@IvanIvanovありがとうございました：D
追加された 著者 Claudio Ludovico Panetta, 源
優れた@イワンイワノフ
追加された 著者 Omar Faruq, 源
@ClaudioLudovicoPanettaこの特別な規則では、CSSスタイルにidを使用しないことをお勧めします。利点はありませんが、使用上の大きな欠点です。
追加された 著者 Ivan Ivanov, 源
@ClaudioLudovicoPanettaでは、IDが一意でなければならないという欠点があり、スタイルがユニークでなければならない特別な理由はありません。
追加された 著者 Ivan Ivanov, 源
@ user247077あなたのためにCSSを書いていない限り、すべてうまくいきます。
追加された 著者 Ivan Ivanov, 源

私は行くだろう：

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

CSSが正しく構成されている限り、プライマリとセカンダリはアプリケーションの他のものと衝突しないはずです。

.controls.primary {}

コントロールをプライマリ/セカンダリよりも前にメインクラスとして配置しました。

私はその下の最初のセットが2番目のセットよりはるかに読みやすいと思う：

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}
24
追加された
源
Cheers @bobo、それはイワンからの公正で良い反応です。私はそれを自分で+1しました:)
追加された 著者 Curt, 源
あなたの返事をありがとう。私は実際に私のプロジェクトであなたのソリューションを適用しましたが、Ivanの答えは、同じ問題を抱えている他の人にとっては非常に有用かもしれないBEM命名規則をもたらします。ご返信ありがとうございます。
追加された 著者 bobo, 源

NCSS と呼ばれる素晴らしい選択肢があります。

名前付きカスケーディングスタイルシートは、名前付け規則とガイドラインです。   セマンティックCSS。

理由：

大規模なCSSは、さまざまな種類の開発者がいるプロジェクトで作業していたとき、悪夢だった。コンベンションやガイドラインの欠如は、維持できない泥の球につながるだろう。

目標：

CSSのための予測可能な文法で、HTMLテンプレートに関する意味情報を提供します。

  • 影響を受けるタグ、コンポーネント、およびセクション
  • あるクラスと他のクラスとの関係は何ですか？

クラス：

名前付きカスケーディングスタイルシートは、

  • ネームスペース
  • 構造クラス
  • コンポーネントクラス
  • タイプクラス
  • 修飾子クラス
  • 機能クラス
  • 例外

Further reading: https://ncss.io/documentation/classes

例：

<!-- header -->


<!-- main -->
<!-- content -->

Headline

<div class="foo-box-content">Box</div>
<!-- sidebar --> 
<!-- footer -->
<div class="foo-box-footer">Powered by NCSS</div>

Further reading: https://ncss.io/documentation/examples

ツール：

インストール：

npm install ncss-linter

HTML文字列を検証する：

bin/ncss-linter --html='<div class="box-content"></div>'

ローカルパスを検証する：

bin/ncss-linter --path=templates/**/*.html --namespace=foo

リモートURLを検証する：

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Further reading: https://ncss.io/documentation/tools

3
追加された
源

TwitterはSUIT CSSを使用しています：

https://github.com/suitcss/suit/blob/master/doc /README.md

同じ著者もイディオム的なCSSを書いています：

https://github.com/necolas/idiomatic-css

1
追加された
源