twitterこの広告は、90日以上更新していないブログに表示しています。2014-09-24新しいCSSの設計規約、AMCSSに関する個人的なまとめCSSの設計規約というと、BEMが有名ですが、最近またAMCSSという新しいCSSの設計規約が出てきました。この記事では、このAMCSSについて簡単に紹介したいと思います。仕事でBEMをよく使っていて、優れた設計規約だとは思いつつも、使っていて気になる点がいくつかあります。BlockとElementとModifilerという3つの概念をクラス属性だけで表現しようとするため、非常に記法が見難いのと冗長なところです。fooブロックのbarエレメントのhogeモディファイヤーを表現すると、以下のようになります。</div></div>"__"や"--"という文字を区切りに使っているため、非常に冗長に見えます。この記法を見た人からはたいてい気持ち悪いと言われてしまいます。AMCSSは属性を使ってCSSを設計するBEMやその他の多くのCSSの設計規約が、class属性を使ってスタイルを記述する方式を採用していますが、AMCSSではHTMLの属性(Attribute)を使ってCSSを設計します。Moduleの略です。BEMでボタンを表現しようとするときたいてい以下の様な形になります。Button</button>AMCSSの場合は、以下のようになります。am-Button="small">Button</button>スタイルの記述も、クラスのセレクタではなく属性セレクタを使って記述します。14px;}概要を説明したところで、早速AMCSSの概念を説明してきます。AMCSSの3つの概念AMCSSには、BEMに似た以下の3つの概念があります。ModuleVariationTrait上の3つの概念に従って開発者はCSSの記述を設計していくことになります。上から一つ一つ説明してきます。ModuleBEMにおけるBlockのような概念です。am-プレフィクスにアッパーキャメルでモジュール名を記述します。...</div>モジュールを記述した要素の子にスタイルを記述したい場合には、"-"ハイフンで区切って子モジュールを宣言します。この子モジュール名もアッパーキャメルで記述します。</div></div>スタイルは、前述したように属性セレクタを使って記述します。...}VariationVariationは、BEMのModifierに似た概念ですが、Moduleで宣言した属性の値として記述します。Moduleで宣言したスタイルを、上書きしたり拡張したりするために利用します。ボタンモジュールを少し拡張して、小さなボタンを作りたいときには、以下のようにsmallを属性値に指定してモジュールのバリエーションを作成できます。...</div>スタイルは、属性セレクタと~=演算子を使って記述します。*/}バリエーションは、クラス属性の値と同様にスペース区切りで複数指定することも出来ます。...}TraitTraitは、ある特定のスタイルに関するプリセットを提供します。前述したModuleとは直交する概念であるため、単独で使うことも出来ますし、Moduleと組み合わせて使うことも出来ます。Moduleと同様に属性を利用しますが、Trait名は小文字から始めてローワーキャメルで書きます。属性と値の一対で宣言します。8px;}プレフィクスAMCSSの文書では、説明のために属性名の最初に、"am-"というプレフィクスがついています。それに習ってこの記事でも属性のプレフィクスには"am-"を使っていますが、規約ではこの"am-"というプレフィクスは、短いものであればなにを使ってもかまいません。ValidなHTML属性を使いたい場合には、"data-"プレフィクスを使うことも可能です。am-じゃなくてui-とかでも良いことになります。...}気になる速度についてたまに、属性セレクタはクラスセレクタよりも遅いので使うべきではない、という話を聞くことが有ります。確かに属性セレクタはクラスセレクタよりも数割遅いのですが、実際にウェブサイトを作っていて問題になることはほとんど無いでしょう。いうのも、CSS自体がボトルネックになることはあまり無く、重たいネットワークや容量の最適化されていない画像、リソースなどのその他の処理の方が先にボトルネックになることはほとんどだからです。CSSがボトルネックになる場合であっても、属性セレクタがボトルネックになるよりも前に、まず利用していないスタイルが多すぎることや、子孫セレクタの利用の方が先に問題になるでしょう。Benchmarksというツールがあるので、それを使ってプロファイルを取ってみると良いでしょう。終わりにCSSを記述する際に、どういった設計規約を取るかによってCSSのメンテナンス性や拡張性は大きく変わります。この記事では、AMCSSという属性を使ってスタイルを記述するCSSの設計規約を紹介しました。»はてなブログをはじめよう!anatooさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。