CSSsass/scssを考慮したCSS設計の比較まとめ個人で制作する場合、BEM、とりわけ、MindBEMdingモデルをCSS設計として採用している。実際の運用では、Blockごとにscssファイルを新規追加もしくは修正して保存すると、自動でファイル結合し、minified化(1行にする)するようにしている。このサイトもそうしている。https://simplesimples.com/wp-content/themes/smplsmpls/assets/css/simplesimples.min.cssこのファイルは、50以上のscssファイルで構成されているが、新規追加時も修正時も迷うことは一切ない(どれだけ増やしても問題ない)。これはBEMの良いところで、class名で悩むことも、すでに使われたclass名か心配する必要がなく、ディレクトリ構成をシンプルに保てるため実現できている。作業効率が劇的に上がることは言うまでもない。新規やフルリニューアル案件で、自分が主導させていただく場合は、間違いなくこれを導入する。そんな案件ばかりではない。最近、今まで見てきた中で圧倒的にワーストな状態のCSS運用にチャレンジさせていただくことになった。CSS設計はない、Bootstrapを使用している、一部でSassを導入しているが、コンパイル後のCSSを修正しているファイルもある、importantを乱立させている(importantの上書きをimportantでしている)、一ファイルに大量のCSS(1万行以上)が記述されている。それが複数ファイルあり、さらには重複されたスタイルも散乱している。一つのクラスを修正しようと思ったら、該当箇所がいくつもある。外部化されているわけでなく、html側にstyleタグやstyle属性で指定されたスタイルもかなりある。breakpointの使い方が整数の場合しかケアされていない。複数人がそれぞれのルールで記述している。CSS設計?もちろん、このような状況は何も見なかったことにし、改修用のCSSファイルを用意し、それを全てのページで読み込んでいるCSS内に@importで呼び出して修正することは、最もイージーですぐに対応可能だ。それでいいのか?担当者はCSSスキルが初心者から上級者まで複数人いる状況で、これから数年先の運用を視野に入れた際、その間に担当者が変わっても同様のコードを書き続けられ、さらにCSSの新しい仕様が適用されたときも適用できることを考慮したい。そのためには、CSSコーディングガイドを用意することで解決できる。その指針としてCSS設計の導入が便利なのだ。すべてオリジナルでルール作りすることもできるが、今時ではない。世はコラボ時代、一般的に浸透しつつあるルールを適用することで、導入コストをグッと抑えてメンテナブルにしたい。前置きがだいぶ長くなってしまった。ついてまとめてみたい。4つのCSS設計を知るプロジェクトごとに最適なCSS設計は異なってくる。選択したCSS設計を厳格に守らなければいけない、ということもない。現実には、選択したCSS設計をベースとして、プロジェクト固有のルールを追加していくことになるだろう。CSS設計の構成CSS設計はどれも似たような構成をしている。その上でそれぞれに独自ルールがある。基本的にSMACSSを理解してしまえば、他の理解は早い。SMACSSの固有パーツをレイアウトとして扱うか、再利用可能として扱うかは、クラス名ルールに影響するので、事前に決めておくべきポイントとなる。オブジェクト指向CSSと和訳されていることが多い。重要なポイントは2つ。構造と見た目を分離することと、コンテナーとコンテンツを分離する、ということ。オブジェクトは、構造と見た目で構成する1つ以上のオブジェクトは、コンテンツ内に配置するコンテナーは、コンテンツを囲むエリアである(何を囲むかは問題ではない)オブジェクトを意識した記述となり、自由度が高いのが特徴。CSSの基本的な考え方、という印象。これだけではさまざまな解釈が可能となるので、ある程度の運用ルールを用意しないと破綻しそう。ノーマライズや基本となるフォントサイズやリンクカラーなど。idやclass名は使わず、あくまで要素に対して指定する。!importantは使わない。Webページを構成するパーツ。プレフィックスをつけ、クラス名で指定することを推奨。テーマに応じてWebページ全体、または一部の見た目を変えるスタイルパーツごとにscssファイルを作れるかがポイントとなりそう。そこの運用がしっかりできないと破綻しそう。themeは使うことはほぼないかな。Webページを構成するパーツ。Blockを構成する要素。BlockやElementの見た目を変える要素クラス名を見れば、それだけで影響範囲を把握できる。BEMの独特なクラス名の付け方と長いクラス名は支持されにくい。ノーマライズや基本となるフォントサイズやリンクカラーなど。Webページを構成するパーツ。componentより大きい固有のパーツ。わずかなスタイル調整のために使うクラスやclearfixのような汎用的に使うクラス実践CSS設計をベースにプロジェクトごとに最適化したルール作りが必要となるわけだが、ここからはもうちょっと細かく構成や記述を考えてみたい。それぞれのCSS設計を踏まえて、実際にSassを用いた運用をイメージする。すべてのCSS設計に足りないのだが、Sassを用いるということは変数やmixin、extend、keyframesのような関数を別に用意して最初に読み込むようにしたいので、そのためのディレクトリを、settingとして用意する。記事の最初の比較表を見直してみる。themeディレクトリ構成案ディレクトリ構成があらかじめ決められているのは、SMACSSとFLOCSS。OOCSSとBEMはとくに決まりはない。FLOCSSでは記述順が明確化されているが、これはSMACSSも同様と考えたい。追加する手間を省いている。そのため、import.scssの運用はない。これは作業効率化においては欠かせない。import.scssOOCSSlayoutの中に、コンテイナーとコンテンツを入れる。ファイル名からコンテイナーかコンテンツか判別できるようにするBEMディレクトリ構成を見るだけでも、BEMはクラス名の書き方が独特なだけで、最もシンプルなCSS設計と言える。再利用可能とするエリアが他のCSS設計に比べて、大きな括りとなっているため注意が必要だが、これもまた最も牢固なCSS設計と言える(完全な独断と偏見)。SMACSS/FLOCSSとくに補足はない。一つだけ先にルールを決めておきたいのが、JavaScriptによって見た目を変更した場合をどのように扱うか、ということだ。SMACSSでは、stateがあるが、それ以外のCSS設計を採用する場合は明確にしておきたい。プリフィックスとしてつけるルールは賛成だが、そのため別フォルダ・別ファイルで管理したくない。JavaScriptのフックとして利用する記述ルールも決めておきたい。いうプレフィックスをつけるCSSによるスタイルは行わないこの2つを徹底することで、JSとCSSの確実な分離が可能となり、CSSのクラス名を変えたらJSが動かなくなるというリスクを回避できる。大前提するのが一番だと思っている。どこぞの誰かが作ったスタイルガイドより説得力があり、受け入れやすい。これを基準として、JavaScriptのフックのルールなど、不足分や差異がある場合は明記するという流れだ。SCSSでは、色々な書き方ができる。そのため、BEM以外のCSS設計では、例えばバリエーション違いの記述ルールであれば、下記のようなルールがあった方がいい。}}複数クラスで指定するのは賛否あると思う。個人的には、htmlからクラス名で逆引きする際、複数クラスで指定していた方がすぐに見つかるので、賛成派だ。この例では、バリエーション違いの例に、primaryを使ったが、実際には大きく3つの分け方がある。.button-1BEMの場合、CSSの書き方が決まっている。そのため、html側はmodifierを使う場合は複数クラス指定することとなるが、SCSS側は複数クラス指定の縛りから解放される。blockの場合、下記のように記述することになる。記述するのに抵抗がある。そこをケアした書き方をMindBEMdingモデルから採用したい。Block–ModifierBlock__Element–Modifierつまり、BEMではModifierの区切りは_(アンダーバーひとつ)だが、MindBEMdingモデルでは–(ハイフン2つ)となり、Key_Valueのような従属関係の記述もない。これであれば、ハイフンが2つ並んで書かれていれば、バリエーション違いとすぐに分かるわけだ。blockの場合、下記のように記述することになる。.button–primaryMindBEMdingモデルの紹介ついでになるが、もう一つの特徴として、すべての命名をBEMに縛らない、というのもポイント。プリフィックスを追加し、複数クラスで指定するというルール)にするだけで、すこぶるスッキリする。この辺りは、あらかじめ想定できる記述ルールを記載しつつも、ガチガチに決めるというより現場で運用しながら追加していく、ということで良いと思う。さいごに久しぶりに休日一日使って、「CSS設計」で検索した記事をいろいろ参考にさせていただきながら、後半は個人的な見解を多く含ませながら書かせていただきました。CSS設計を導入してから7年以上経ちますが、普段使用していないCSS設計の理解と誤解が解けました。これを踏まえてどうやって運用レベルまで落とし込み、現状打破できるか。頑張ります!COMMENT最後まで目を通していただき、ありがとうございます。この記事はいかがでしたか?コメント送信できませんでした。恐れ入りますが、コメントが入力されていることをご確認の上、もう一度「コメント送信」を選択してください。object-fit基本的に、情報を持たない画像は背景画像で処理している。ポストに投函されている。publicこれまでいろんな案件をやってきて、案件ごとというか環境構築時に使用するフレームワークによって公開ディレクトリ名が様々あった。知識編MAMPとDockerの仁義なき選択ローカル環境をどうしようかな、の結論。AWSやGCP、Azureを使う場合は、Docker。いわゆるレンタルサーバーを使う場合は、MAMP。深夜2:00から、WWDC24の基調講演が配信された。気になった点のみピックアップ。フルサイズ機が8月下旬に発表される噂があることを教えてもらった。WordPressスクロールバーをカスタマイズするスクロールバーをカスタマイズできるライブラリを探して。公式サイトのインストールに表示されている内容をコピーする。【カメラ初心者からの脱却】マニュアルモードしか勝たん。fcのフルサイズ版が発表になるという有力情報がある。オブジェクトの値が重複する場合は削除するたとえば、下記のような配列があって。セッションから「visionOS」で絞り込みWWDC23で公開されたVIDEOは181個(!!!)もある。その中から、「visionOS」のタグがついたVIDEOだけを抽出してみた。Proよく読まれている記事2画面の片方を全画面プレビューする設定方法(iPadでもできる)外部モニターがあれば、片方の画面全体にプレビューを表示させながら編集したくなるというもの。iPadを外部モニターとして接続することもできる。scrollLeftまずはサンプル。これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。JavaScriptCSSのminifyやJSの難読化された圧縮ファイルを戻すWebツールxxx.min.cssやxxx.min.jsのようなファイル名でCSSのminifyやJSの難読化された一行の圧縮ファイルを見やすくした状態で確認したいとき。朝、いつものようにMacを起動して、AutomatorでWeb制作関連のアプリを一気に立ち上げる。あれ?Dreamweaverが開いていない。WordPress背景色を黒から白ベースに変更するどうしても黒ベースが苦手で。玄人感がある気がするのです。入れてみた2022年1月16日大幅に書き直しました。最新のOSではなくなった。徒然なままに項目”Clipy”は開いているため、ゴミ箱に入れることができません。インストール&再起動して使ってみた。徒然なままにmaxlength属性inputタグ要素の属性、maxlengthについて、ちょっと調べてみた。wp_set_object_termsカテゴリーやタグ(カスタム投稿でいうとタクソノミー)の値を管理画面外から更新する場合の備忘録。カラースペース変換ほんとはrawで撮影して自分色に編集したいところだけど、カメラ内部でrawで録画できる機種はまだまだ少ない。ResolveMacで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。カメラレンズの価格が知りたくなった。その数、50本くらい。いや、もっと増えるだろう。価格コムの最安値を参考価格とする。カメラレンズの価格が知りたくなった。その数、50本くらい。いや、もっと増えるだろう。価格コムの最安値を参考価格とする。API項目”Clipy”は開いているため、ゴミ箱に入れることができません。インストール&再起動して使ってみた。入れてみた2022年1月16日大幅に書き直しました。最新のOSではなくなった。最初にスライドショーを自作したのがおよそ11年前(2021年12月現在)。WordPressMacで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。Resolve(ダビンチリゾルブ)の音関連についてのメモ。ResolveWP_Queryを使って絞り込み検索するのにコレは便利!めっちゃ参考になるページを見つけた。絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。フルサイズ対応のカメラレンズを集めてみた。scrollLeftまずはサンプル。これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。JavaScript忙しくてしていること。