[翻訳] CSS メソッドについて話しましょう_html/css_WEB-ITnose

CSS 方法論について話しましょう

元のリンク: [A Look at Some CSS Methodology]()

CSS は、大規模で複雑で、急速に反復されるシステムでは管理が難しいことで知られています。

その理由の 1 つは、CSS にスコープ管理メカニズムが組み込まれていないことです。 CSS ではすべてがグローバルです。つまり、加えた変更はカスケードしたり、UI のまったく無関係な部分を変更したりする可能性があります。

Sass、Less、Stylus などの CSS プリプロセッサとも呼ばれる拡張 CSS 言語は、いくつかの新機能を追加することで CSS コードの作成を容易にします。しかし、これらのスケーラブルな CSS 言語を使用しても、私の意見では、スケーラビリティの問題は解決されていません。

CSS に独自のスコープ メカニズムが存在しない前は、HTML ドキュメントの特定の領域が影響を受けないよう独自のシステムを設計する必要がありました。

以下は、いくつかの答えを見つけることを可能にする CSS 方法論の紹介です。

この記事では、次の CSS 手法について説明します:

• オブジェクト指向 CSS (OOCSS)

• ブロック、要素、修飾子(BEM))

• CSS のスケーラブルなモジュラー アーキテクチャ ( SMACSS)

• SUIT CSS

• Systematic CSS (Systematic CSS)

CSS Methodology これは、CSS を記述するための正式に文書化されたメソッド システムであり、フロントエンド コードを開発、保守、拡張することができます。一連の小さな独立した方法。不可欠なコード部分ではなく。

CSS 方法論を採用すると、たとえそれが自分で作成したものであっても、プロジェクトの規模や複雑さに関係なく、CSS を使用したデザインがより上手になり、デザイン プロジェクトの反復がより上手になります。

関連: 大規模な Web サイト向けの CSS 開発

各 CSS 手法は、CSS のスケーラビリティ/保守性に対処するためのわずかに異なる一連の方法を提供します。 CSS 方法論では通常、次のガイドラインが定義されています:

• CSS と HTML のベスト プラクティス

• クラスと ID の命名規則

• CSS スタイル ルールの順序と組み合わせ

• コードの書式設定

世界はある「最良の」CSS 手法はありません。個人、チーム、プロジェクトごとに適した方法が異なります。

私たちが望んでいるのは、既存の CSS 手法を理解することで、ニーズに適応する方法を見つけることができることです。あるいは、創造性を刺激して独自の CSS 手法を作成できるかもしれません。

オブジェクト指向 CSS (OOCSS)

Nicole Sullivan のオブジェクト指向 CSS、または単に OOCSS は 2009 年にリリースされました。

これは実際に広く採用された最初の CSS 手法でした。今でも大きな影響力を持っています。

OOCSS は、構造と表面の分離を促進します。この方法では、コンテンツとコンテナを明確に区別します。

OOCSS では、スタイル ルールは CSS クラス セレクターによってのみ記述されます。

OOCSS の例

たとえば、ボタン要素のスタイルは、次の 2 つの CSS クラスによって設定できます。

• .button -- ボタンの基本構造を提供します

• .grey-btn -- 色やその他の視覚スタイルの提供

CSS

.button{    box-sizing:border-box;    height:50px;    width:100%;}.grey-btn{    background:#EEE;    border:1px solid #DDD;    box-shadow:rgba(0,0,0,0.5) 1px 1px 3px;    color:#555;}

HTML

<button class="button grey-btn"></button>

Counterexample

/* 后代选择器在OOCSS中是 */.wrapper .blog-post .button{    ...}

このようにして、HTML 要素のスタイルのパフォーマンスは、HTML 要素が含まれる特定の DOM 構造に依存しません。が位置しており、位置の影響を受けません。

OOCSS 手法の最大の利点は、作成者が CSS カスケード スタイルを非常に特殊なセレクターに固定するのではなく、最大限に活用できることです。

関連: CSS 機能はどのように機能しますか?

著者は、可能な限り新しいスタイルを作成するのではなく、既存のスタイルを再利用することを推奨しています。また、既存の CSS スタイルを変更または上書きするのではなく、新しいクラスでスタイルを拡張することをお勧めします。

反例

HTML

<!-- 反例  --><ul class="to-do">    <li>Combine my CSS files</li>    <li>Run CSS Lint</li>    <li>Minify my stylesheet</li></ul>

CSS

 /*  反例 */ .to-do{     color:#FFF;     background-color:#000; } .to-do li:first-child{     color:#FF0000; } 

OOCSS example

CSS をよりモジュール化して柔軟にし、子孫セレクターが表示されないようにするために、次のメソッドを使用して上記の反例をコピーします:

HTML

<!-- OOCSS --><ul class="to-do">      <li class="first-to-do-    item">Combine my CSS files</li>      <li>Run CSS Lint</li>      <li>Minify my stylesheet</li></ul>

CSS

/* OOCSS */.to-do {      color: #FFF;      background-color: #000;}.first-to-do-item {      color: #FF0000;}

OOCSS の弱点は、非常に多くのクラスを使用する可能性が高く、最終的にはそれらを維持または管理できなくなることです。

そして、私の意見では、OOCSS にインスピレーションを与えたオブジェクト指向プログラミングの考え方は CSS には適合しません。

ただし、これは OOCSS の原則が無効であることを意味するものではありません。それどころか、OOCSS は、大規模な CSS 開発に合理性をもたらす一般的に使用される CSS 手法です。

Blocks, Elements, Modifiers

Blocks, Elements, Modifiers (より一般的には BEM として知られています) は、CSS と呼ばれるツールです。ロシアの Google の Yandex 開発チームによって開発されたシステム。

BEM の背後にある考え方は、さまざまな役割を実装する CSS クラスを区別することです。これは、その役割を表す CSS クラス名を命名することで行われます。

BEM は、OOCSS の補足としてのみ使用できます。これは、OOCSS が命名規則を課さないためです。

在BEM的方法论中，一个块是一个独立的模块好的UI组件。一个块可以由多个HTML元素组成，甚至有几个块组合而成。比如说导航菜单和搜索表单就是一个块的例子。

一个元素就是块的一个组件。一个元素一般用来完成一个目的。比如说，你有一个导航菜单块，那导航菜单的链接就是元素，它可以使一个列表项(li元素)或者链接(a元素).

一个修饰符是用来改变块或者元素默认样式的CSS类。

喜爱案就是BEM类命名的语法：

• .block

• .block--modifier

• .block__element

• .block__element--modifier

反例

考虑下面的例子，标记代表的是一个登录表单：

HTML

<form>    <label>    username <input type="text" name="username" />    </label>    <label>        password <input type="password" name="password" />    </label>    <button>        Sign in    </button></form>

BEM范例

下面是使用BEM命名规则来为上面的标记命名：

HTML

<form class="loginform loginform--errors">    <label class="loginform__username loginform__username--error">Username <input type="text" name="username" />    </label>    <label class="loginform__password">Password <input type="password" name="password" />    </label>   <button class="loginform__btn loginform__btn--inactive">            Sign in    </button></form>

这个.loginform类是一个块。
这个.loginform块由三个元素组成：

元素	作用
loginform__username	代表用户名
loginform__password	代表密码
loginform__btn	用户点击提交表单

这三个修饰符分别是：

修饰符	描述
.loginform__username--errror	错误时的样式
.loginform__btn--inactive	未激活样式
.loginform--errors	包含错误的样式

这种BEM的命名规则帮助CSS的作者遵循OOCSS的原则。通过使用这种扁平的命名方式避免了多后代的选择器。

反例

所以我们不会用下面这种样式命名规则。。。

CSS

.loginform .username .error{    ...}

BEM范例

。。。你只需要一个类选择器：

CSS

.loginform__username--error{    ...}

BEM是一个非常鲁棒的命名规范。

它成功地区分了类的不同关注点。并且通过类名我们可以很简单的看到标记之间的关系。

一些关于BEM的主观批评如下：

• 类名会变的很长很难看

• 命名规范对于没有经验的开发者来说不是那么的好理解

作为个人来讲，我倒不认为这是特别强烈的批评。但是如果有一个能够和BEM一样鲁棒的命名规范同时能够更简洁和好理解那就更好啦。

待续。。。