</p>BEMの書き方として、エレメントはブロックに紐づいて定義される為、ブロック内であれば繰り返し使用しても問題ありません。上のコードを見てもらうと、悪い書き方の方はエレメントがブロックの外に出てしまっているので、BEMのルールから外れてしまっています。BEMのルールに従って基本的な書き方をすると、CSSの影響範囲が予測しやすいので可読性が高く、モジュールごとに共通化して分けやすいと言うメリットがあります。モディファイアでパターンを分けられるので追加や変更も楽にできます。デメリットとしては、ブロックの中の入れ子が多い場合にクラス名が長くなってしまいがちなので、一度ペーパーコーディングやブロック構成を考え直してから書いてみるとスッキリすると思います。SMACSSSMACSSは、CSSのルールを以下の5種類にカテゴライズした設計手法です。■Module再利用可能なパーツ■State状態を示す■ThemeサイトのデザインテーマSMACSSの特徴として、ベースやレイアウトの部分まで決められる為、ボタンを再利用したい場合や背景を変えたい時などにクラス名を指定するだけでスタイルを指定できます。レイアウトのクラスに接頭辞をつけることでコードの質が担保されます。State(状態)書き方の例.l-Block__Element--ModifierFLOCSS・FLOCSSは、以下のように3つのレイヤーと3つの子レイヤーに分けており、OOCSSやSMACSSのいいとこ取りをした設計手法です。書き方の例.c-button.p-Block__Element基本的にはFoundation・Layout・Objectの3つでサイトの構成を作ることができ、Objectをさらに3つの構成で分けることができ、LayoutだけでなくCompenentやProjectにも「c-」や「p-」の接頭辞をつけることができSMACSSよりさらに細かくルールを決めることができます。結局何が良いのかと言うのはサイトの規模やチームで決まってきます。FLOCSS(ルールが堅牢な為)どのCSS設計も一長一短の為、BEMとFLOCSSやBEMとSMACSSなど組み合わせて使うと良いと思います!Wizのフロントエンドチームでは、何を使っているのか?Wizのフロントエンドチームでは、FLOCSSとBEMを使っています。Object,のようにファイルごとに分割し、追加や変更がしやすいよう管理されています。命名規則はBEMに加えてFLOCSSの接頭辞を使っているので、予測しやすいコードになっています。プロジェクトによっては多少変わりますが、Wizでは主にこの書き方を採用しています。まとめ今回は、CSS設計について紹介しました。私自身入社前はCSSは少し触っていた程度で、コードの重複が起きたり、モジュールの共通化が出来ていなかったりしていました。研修でCSS設計について理解することで記述量も大幅に減り、以前より予測しやすく変更しやすいCSSが書けるようになりました。今回の内容が、CSS設計について知らない方や破綻しにくいCSSを書きたいと言う人の参考になれば幸いです。Wizではエンジニアを募集しております。興味のある方、ぜひご覧下さい。今回は私が実際に実務で使用しているCSS(Sass)のちょっとした...2021-07-19リモート環境におけるエンジニアの新人研修と新人メンターの話リモート環境下で行われたフロントエンドエンジニア新人研修に...2021-07-09面倒な作業をコマンドでできるようにする業務効率化のためにShellスクリプトを書いてみました。(1)リンク利用規約/免責事項このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。はてなブログをはじめよう!wiz012さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。