bem「良いHTML、CSS」の基本ルールCSSといえど、プログラミング言語であることは間違いなく、とりわけ「CSS」だからというものはありません。どの言語においても「変更に耐えうるコード」が一つの鍵となってきます。CSSは軟弱な言語であり、セレクタの書き方、およびHTMLのクラス属性の命名など要件を満たすには難しい部分はあると思います。そのような部分を明文化して、備忘録として残せれば望外の喜びだと思い、本記事を執筆しようと思いました。アジェンダ以下のようなアジェンダになっています。以下の要件の時にコードを書くこと、または変更すること、削ることになります。要件の追加HTML要素が追加されたときに限らず、レイアウトを現行のものから変更したいときなどに要件が発生します。「ハンバーガーメニューを右上にしたい」などといったものです。コード自体は振る舞いを記述するものであり、たとえ要素の場所の変更でも要件が追加されたとも考えることができます。要素の場所を変更したいということは、コードの振る舞いを変更したいのと同値です。「バグである」と考えることができます。設計の改善CSS自体の構造修正です。以下のようなHTMLに対して二つのCSSを書くことができます。red}とも書けます。どちらが良い方法かは、この記事を読めばわかると思います。前者から後者に書き換えをしても何も振る舞いは変わりません。リソース利用の最適化グラフィカルな演算では、GPUを使ったりするイメージがあるでしょう。ブラウザの仕組みを少し解説するとDOMとCSSOMをレンダリングしてレイアウトを決めてペインティングをするという流れになっています。Paintingが大きなコストをしめるのは問題ではないですが、DOMの変更を伴わないGIFやcanva要素、そしてCSSアニメーションプロパティが関与してきます。animationや@keyframesによって簡単に使用することができて、非常に一般的ですが制御しきれないという過ちが多いのも事実です。したがって、コストを著しくあげることになるケースがあります。このようなケースではリソースが主眼点であり、振る舞いもコードの構造も変更されません。HTML、CSSの設計のポイントHTMLに依存したCSSをしないこと多くの場合、デザイン変更でもっとも重要なのは構造変更、つまりHTMLを書き直すシチュエーションが多いでしょう。そのようなときにHTMLを変更すると同時にCSSも変更しなければならないのは、しんどいでしょう。何か一つHTML要素を変更すると、それ以上に大幅にCSSを変更しなければなりません。ある程度、HTMLとCSSの結合度の低いコードを書くことが大事です。以下のようなHTMLコードがあるとします。</div></div>そのようなときに以下のようなCSSを書いたとしましょう。12px;}すると、以下のよう変更があったときが耐えられません。...}とすればCSS側は変更する必要がなくなります。まとめるとh2などタグでスタイル付けをするのは好ましくないでしょう。絶対値でほとんどの値を定義している以下のようなケースを考えます。</div></div>そして以下のように絶対値で何もかも定義したら、あとあと面倒です。27px;}しかし、font-sizeを大きくするとline-heightも同時に変えなければなりません。font-size:18px;}とすることができ、font-sizeを変更してもline-heightをいじる必要がありません。product-descriptionはproductから継承されるため、指定すらする必要がありません。ここで1.5としているのは単位をつけると、その値そのままが継承されてしまうからです。不要なセレクタが縛っている不要なセレクタがあると、いくらclassを定義して頑張った気になったとしてもHTMLに束縛をされます。...}とするとh2に対して束縛をされていることになります。...}としても問題はなく、h3になるなどマークアップに変更点があったとしても機能します。長いセレクタセレクタ>やでトップレベルからわざわざ指定をすると、構造そのものに束縛を受けることになります。...}とする方が移植性が高く、変更に耐えられます。設計のアイデアいくつかHTMLとCSSを設計のポイントを解説していこうと思います。最初に知っておきたい現状これからCSSのOOCSS、BEM、SMACSSの3つの設計パターンを解説していきますが、世界ではどのような位置付けなのでしょう。Trendで見てみましょう。圧倒的にBEMがよく使われているのではないかと推測することができます。CSS)とは、オブジェクト指向の考えをCSSに取り込み、変更に耐えられるCSSをデザインするのが目的とするCSSのデザインパターンです。ここでいるオブジェクト(Object)とは、繰り返されるビジュアルパターンです。ルールは二つあって構造と見た目の分離コンテナとコンテンツの分離です。構造とは、いわゆるユーザーに見えない要素のサイズやポジションなどをいいます。構造に関するCSSプロパティでいうとどのように配置するべきかを定義する以下のようなものでありHeightWidthMarginsPaddingOverflowそして見た目に関するCSSプロパティはどのように見えるかを定義する以下のようなものです。ColorsFontsShadowGradients例えば以下のような3つの要素があったとします。Night</div>可視化をすると以下の通りです。このようなHTML要素に対して、以下のようなCSSを定義しています。gray;}このような要素だと別々にそれぞれ定義するよりは共通するclass属性greetingなどを定義すると共通要素をつけられます。共通部分をオブジェクトの特性としてまとめたような感じです。二つ目の「コンテナとコンテンツの分離」は場所に依存しないCSSを書くということです。一貫性と、メンテナンス性を提供します。以下のように.sidebarのように「場所」に関するスタイルと、.listのように「コンテンツ」に関するCSSを分離することによって、どこにlistを配置してもスタイルが崩れることなく、移行することができます。red;}SMACSSを実践するSMACSS(スマックス)とはフロントエンドのスタイルガイドで、OOCSSを元に定義されています。SMACSSはパターン化のルールを定義しているものです。Layoutを構成する単位。エラーや隠れたりするなど状態が変わるようなものです。is-の接頭語をつけます。is-hiddenやis-active-tableのように状態を定義します。テーマを切り替えるなど包括的な機能を実現するものに対して使われます。ocean-hokorobiなどとテーマをbody要素などtheme-の接頭語をつけて設定します。各要素のデフォルトスタイルを定義Baseは、各要素のデフォルトを定義します。以下のような指定方法があります。ページをセクション毎に分割する構成単位のスタイル慣習的にidを用いて定義をしていきます。...}などと定義をします。gridなどは.l-gridのようにクラス属性を使ってスタイルを指定してきます。idを指定しないときは.l-と接頭語をつけます。Layoutの構成単位ほぼすべてのパターンがこのModuleになります。接頭語はm-やmod--をつけたりします。エラーや隠れたりするなど、状態を示す例えばis-hiddenのように、隠れた要素にclass属性を定義します。</div></div>のようにsoldout-messageのようなものをさします。テーマルールを指定するものわかりやすく、テーマについてである。HTMLのBodyタグに以下のようにページ全体についてのスタイル付けをしていくものがある。class="theme-red">...</body>CSSは以下の通りである。...}のようにします。このようにテーマに関する影響をうけるものはtheme-と接頭語をつけることが推奨されています。このようにすることによって、ページ全体を書き換えることができる。Modifier)とは、再利用可能なコンポーネットとコードを共通化するためのメソッドです。開発者に人気の命名規則で、多くのマークアップフロントエンドで取り入れられているものです。公式サイトは以下の通りです。簡単に設定できて、再定義できるが挙げられます。それでは、詳しくみていきましょう。BlockBlockとは、命名規則の基礎を作るもので、独立した要素を定義します。以下のような要素をさします。fieldmenuheading命名規則は短く簡単に決めます。接頭語にb-をつけたりするケースもありますが、普通はつけません。CSSセレクタはclass属性だけで、tagやidを使わず他の依存性は一切無くします。...</div>そしてスタイルは以下のようにします。red;}ElementBlockを構成するものです。これは以下のようなものをさします。fieldのlabelheadingのlogomenuのitemまた、以下のようなルールがあります。命名規則は[BLOCK名__ELEMENT名]で命名します。CSSセレクタは単独で指定します。[BLOCK名__ELEMENT名]で指定します。HTML要素は以下のようにします。class="block__element">...</span></div>CSSは以下のコードにします。ここでは正しいコードと間違ったコードを示します。...}ModifierModifierはBlockやElementのバリエーションを定義するものです。.block__elementでBlockレベルのModifierを定義し.block__element--modでElementのModifierを定義しますこれを実践すると以下のような構成になります。...}サンプル例えば以下のようなフォームがあったとします。/></form>そして以下のようにCSSでスタイル付をしていきます。}まとめこれで圧倒的にCSS設計力がついたのではないでしょうか。みなさんもBEMから実践してみてください。ここの節は余談なので飛ばしてもらっていいです。ジ...2018-12-23Concourseで継続的デリバリー。2018の第3日目の記事です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。