css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。
案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。
その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。
なんだったら「css設計ってナニ？」的な場合も多々見受けられます…
新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則っていなければ、それ自体を読み解くことに時間を費やされ、結構な負担となります。
実際に新規構築する際に「なぜ class名を考えるのにこんなに時間を使っているんだろう」って思うこともありますし、運用フェーズでちょっとしたレイアウト改修などの際に「ここのスタイル記述を変更したら影響範囲はどこまでなのだろうか？」などと、思い悩んだり検証・調査に時間を無駄にすることもあります。
当たり前ですが、最初からある程度明確にルール化されていると、無駄に悩んだり検証する時間はぐっと少なく抑えられると思います。
明確なルール化するためにも
マークアッパー達が今まで散々悩んで…闘ってきた歴史をまとめたいと思います。
BEMは、Block(大きな括り)・Element(ブロック内の要素)・Modifier(Block・Elementの亜種パターン)の頭文字をとったもので、厳格なクラス命名規則が特徴の手法です。
画面構成する要素を、この3つのどれかに当てはめてクラス名を付与していきます。
命名規則的には Block ＞ Element ＞ Modifier の順でつなぎ合わせます。
例えば common-list という blockの中に common-title という element がある場合この elementのクラス名は common-list__common-title になります。
<div class="Block">
<div class="Block__element">
<div class="Block__element--modifier"></div>
</div>
</div>.Block {
&__element {
&--modifier {
}
}
}Object Oriented CSS の略語で、『構造と見た目を分離』することを心がけて設計・記述していくオブジェクト指向cssという概念になります。
ザックリいうと位置・レイアウト・大きさなどの構造系のプロパティと、色・装飾などの見た目に関するプロパティを、同じクラス内に記述してはいけないという考え方になります。
ある意味、設計手法というより 【心がけ】 ですね。
※Atomic Design でいうところの『分子(molecule)』モジュールを使用するような設計になります
<ul>
<li class="label-news">NEWS</li>
<li class="label-pickup">PICKUP</li>
<li class="label-info">INFO</li>
</ul>.label-new {
margin-right:.5em;
padding:.2em 1em;
display:inline-block;
background-color:yellow;
}
.label-pickup {
margin-right:.5em;
padding:.2em 1em;
display:inline-block;
background-color: pink;
}
.label-info {
margin-right:.5em;
padding:.2em 1em;
display:inline-block;
background-color:#73d1fa;
}<ul>
<li class="label label-news">NEWS</li>
<li class="label label-pickup">PICKUP</li>
<li class="label label-info">INFO</li>
</ul>.label {
margin-right:.5em;
padding:.2em 1em;
display:inline-block;
&-news{
background-color:yellow;
}
&-pickup{
background-color:pink;
}
&-info{
background-color:#73d1fa;
}
}SMACSS は、Scalable and Modular Architecture for CSS の略語で、厳格なフレームワークというものではなく、スタイルガイド・設計する上での概念です。
基本的な考え方は OOCSS と同じで、オブジェクト指向な記述方法です。
おおまかに下記のように5つに分類・細分化して記述していきます。
body {
background:white;
}
input[type=text] {
border:0;
}
a:visited {
color:red;
}.l-main {
width:70%;
}
.l-sub {
width:30%;
}.c-buttonType_normal{
padding:10px;
text-align:center;
min-width:150px;
background:#000;
border-radius:5px;
}.is-hidden{
display:none;
}.theme-background_red{
background:#c00;
}FLOCSS は、Foundation Layout Object css の略語で、BEM・OOCSS・SMACSS・SuitCSS・MCSS などの考え方を取り入れた設計手法で、基本的な命名規則は MindBEMding を採用し、【Foundation・Layout・Object】の3つのレイヤーで構成します。
また、Object レイヤーには、【Component・Project・Utility】の3つの子レイヤーを持ちます。
<a class="c-btnLayout c-btnLayout_red u-ma3" href="#">Button</a>.c-btnLayout {
padding:.25em 1em;
text-align:center;
display:inline-block;
border:1px solid #333;
border-radius:.25em;
&_red {
color:#fff;
background:#c00;
}
}.u-ma3 {
margin:1.5em;
}tailwindcss は、バージョン2.0 がリリースされたばかりの今注目のフレームワークです。
CSSフレームワークといえば Twitter Bootstrap が代表的ですが、大きな違いは、その粒度になります。
tailwindcss は、Atomic Design でいうところの『原子(Atom)』モジュールのみ使用するような設計となり、ユーティリティーファーストCSSフレームワークというカテゴリーに入ります。
今まで様々な理由・思考で付与してきた『class名』ですが…ユーティリティーファーストCSSフレームワークの概念では、それ自体に悩む時間や手間を完全にゼロにしてくれます！
<button
type="button"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Button
</button>先人たちは、イロイロな観点・角度から少しでも分かりやすく・時間をかけずに！を心がけて様々な手法を提唱してきました。
まさに闘いであり、歴史ですね！
結局のところ『これが完璧！』というものはないです…ハイ。
どの手法にも、必ずメリット・デメリットが存在していますし、案件の種別に依存することもありますし、時の流れとともに新しい手法や考え方が、次次に誰かが唱えてくることでしょうから…
私個人の考えとしては『どの手法を選択する』ではなく、イロイロと検証し、学んで、『様々な手法の良いところだけを使っていこう』です。
上記の良いところをイイ感じにミックスさせれば、最終的に良いのではないかと。
結局一番大事なのは『ルール化・ルールの共有』ですね(￣^￣)ゞ
