2015年02月22日

SUIT CSS

SUIT CSSはコンポーネントベースのCSS設計手法。ReactやEmber、 AngularといったコンポーネントベースのUI設計と相性がよい。個人的にはBEMよりこちらの設計手法のほうが使いやすい

SUIT CSSはCSSのclassの命名規則CSS preprocessor(プリプロセッサー)などで定義される。

ユーティリティー



まず、ユーティリティーは直接コンポーネントを操作するための低レベルなclassです。同一コンポーネントの細かい差異はユーティリティーで解消します。

ユーティリティーは「u-」から始まりキャメルケースで記述を行います。

<div class="u-cf">
<a class="u-floatLeft" href="{{url}}">
<img class="u-block" src="{{src}}" alt="">
</a>
<p class="u-sizeFill u-textBreak">

</p>
</div>


レスポンシブユーティリティ



ユーティリティでもレスポンシブつまり特定解像度でしか利用しないclassは「u-sm-」、「 u-md-」、「u-lg- 」といった接頭辞にする。

コンポーネント



コンポーネントを利用することは以下のメリットがあります。


  • コンポーネント間の違いを明確化できます
  • 詳細度を低く保つことができます
  • 表現のセマンティックスと文章のセマンティックスを分離できる


接頭辞



コンポーネントでは必要に応じて「xxx-」といった接頭辞を指定できる。

.twt-Button { /* … */ }
.twt-Tabs { /* … */ }


複数のライブラリを導入する際などに、接頭辞を指定することでライブラリ間のコンポーネント名の重複を避けることができます。

コンポーネント



コンポーネントはパスカルケース(pascal case)つまり、クラス名の先頭を大文字の単語から始め、文節ごとに大文字で始めた単語を連結していく形式で記述を行います。

.MyComponent { /* … */ }


modifier(修飾)



modifierはベースコンポーネントと差異を出したい際に利用するclassです。コンポーネントの後ろにハイフン2つにキャメルケースで記述を行います。

/* Core button */
.Button { /* … */ }
/* Default button style */
.Button--default { /* … */ }


子孫要素



コンポーネントの子孫要素にはコンポーネントの後ろにハイフンをつけキャメルケースで記述を行います。

<article class="Tweet">
<header class="Tweet-header">
<img class="Tweet-avatar" src="{{src}}" alt="{{alt}}">

</header>
<div class="Tweet-bodyText">

</div>
</article>


タグ:CSS suit
posted by ねこまんま at 07:30 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。