2019年9月16日SHAREツイートシェアはてブLINEPocketスポンサーリンクこんにちは。もやし(@moyashi3333)です。フリーランスとして、主にWeb制作・コーディング業をして生活しています。コーディング中の悩みweb制作のコーディングができるようになったけど、cssがごちゃごちゃしていて管理しづらい。いつもcssの書き方・まとめ方で迷っている。使いまくり、よくわからなくなっている。上記の悩みを解決するには、CSS設計を取り入れるのがおすすめです。本記事では、css設計の考え方をわかりやすく解説し、おすすめのcss設計である「FLOCSS」を紹介します。css設計(FLOCSS)を導入すれば、メンテナンスしやすいcssを書くことができ、結果としてコーディングスピードも上がります。CSS設計「FLOCSS」を使い、cssコーディングを効率化しようcss設計手法は、cssの書き方・管理方法におけるルールを設けること「css設計」とは、どうすれば効率的にコーディングできるか、メンテナンスしやすい状態にしておけるのかを考慮した、css管理における指針・ルールのことです。使っちゃおう」だったりとなり、ごちゃごちゃしたコード(メンテナンス性の低い)コードになりがちです。した問題は、特にページ数の多いwebサイトだと顕著です。修正案件で、1つのstyle.cssファイルに何も考えずに書かれたcssといったものに当たると、涙が出るのはぼくだけではないはず。css設計を導入することで、cssの書き方・まとめ方に迷うことがなくなり、かつ、メンテナンスしやすい(=保守性が高い)cssコーディングを行うことができます。結果として、コーディングの効率化につながります。css設計を取り入れる上でのポイントcss設計を取り入れる際は、基本的な3つの方向性があります。一定のルールに基づきクラス名を付与する(命名規則を設ける)cssは必ずクラス指定で適用するスタイルの適用先・役割に応じて、ファイル・ディレクトリを分けるそれぞれ解説していきます。一定のルールに基づきクラス名を付与する(命名規則を設ける)まず、クラス名に命名規則(ルール)を設けることで、クラス名を考える時間が削減できます。クラスの命名規則としては、BEM(ベム)が有名です。今回紹介するFLOCSSも、BEMの考え方を取り入れています。予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?ferretcssは必ずクラス指定で適用するまた、cssはクラス指定で行なってあげることで、スタイルの上書き問題が解消されます。使うといったことになってしまいます。クラス指定で適用するようにしましょう。blue;}スタイルの適用先・役割に応じて、ファイル・ディレクトリを分けるそして、スタイルの適用先や役割によって、ファイル・ディレクトリ(=フォルダ)を分割してあげることで、どこに何のスタイルが指定してあるのかがわかりやすくなります。一般的なwebサイトにはヘッダー・フッター・サイドバーという要素がありますね。ようにファイルを分けて、各ファイル内でスタイルを書いてあげます。「layout」というディレクトリを作成し、その中に上記3つのファイルを入れるといったイメージです。filename.cssおすすめのcss設計手法は「FLOCSS」css設計には複数の手法があります。ぼくが実際に使っていておすすめなcss設計が「FLOCSS(フロックス)」です。どこに何のスタイルが定義されているかパッと見でわかる点と、共通パーツのスタイルを再利用しやすい点が気に入っています。FLOCSSにおけるディレクトリ構成FLOCSSでは、スタイルの役割や適用先に応じて、以下のようなディレクトリ構成(レイヤー)に分けられます。Foundation:ベースとなる基本設定など。reset.cssやbodyタグ、色の設定等。Layout:一般的なレイアウトパーツ。Component:再利用できる共通パーツ。Project:各ページに固有のもの。Utility:微妙なスタイル調整に使えるもの。(Plugins:外部プラグインのスタイル編集用)例えば、次のような構成になります(cssファイルではなく、scssファイルを想定)。使って各ファイルをひとつのファイルで読み込み、cssにコンパイルすればOKです。同じスタイルが2-3回登場する場合は共通パーツ化してしまいましょう。ついては、微妙なスタイル調整だけで良いのに、class名を設定してcss書くのが面倒だ...という時に有効です。調整用クラスといった具合です。基本的な命名規則はBEM(MindBEMding)に従います。HTML・CSSの設計にBEMを取り入れてみよう!Tech.Dig;その上で、FLOCSSのどのディレクトリ(レイヤー)に該当するかによって、クラス名にプレフィックスを付けてあげます。.l-*:layoutパーツ。l-sidebar.c-*:componentパーツ。c-post-card.p-*:projectパーツ。p-gallery.u-*:utilityパーツ。u-ta-centerこうすれば、クラス名を見ればどこで定義されているか一目瞭然ですね。ファイルを見ればOKという感じです。クラス名の付け方は、以下のような感じです。Media【補足】cssを書く際は、Sassを使えるようになろうcss設計を取り入れる場合、Sassを使えないと効果が半減します。Sassはcssを拡張した言語で、cssを効率的に・わかりやすく書くことができます。cssを書ける人なら難しくありませんし、css設計を取り入れないにしても習得する価値は大いにあります。いうより、コーダーなら必須といっても過言ではありません。Progateでもコースがありますので、サクッと受講してみましょう。SassProgateCSS設計「FLOCSS」を使い、cssコーディングを効率化しようこの記事のまとめです。css設計手法とは、効率的でメンテナンスしやすい(保守性の高い)cssを書く方法・ルールのこと。導入すれば、コーディングスピードが上がる。3つのポイント:クラス名の命名規則を設けること、cssはクラス指定で適用すること、スタイルの適用先や役割に応じてファイル・ディレクトリを分割すること。おすすめのcss設計はFLOCSS(フロックス)。今後cssを書く際は、Sassを使っていくべき。本記事に関する質問等ありましたら、Twitterやお問い合わせフォームからお気軽にどうぞ。:HTML/CSS関連記事Swiperでクリック式の複数行サムネイル型スライダーを作る【コピペOK】この記事を書いた人もやし会社員ブロガー27歳のWeb系フリーランス。大阪大学を卒業後、5年弱会社勤め。現在はWeb制作をメインに、フリーランスとして活動中。ファッション、漫画、おいしいご飯が好き。→詳しいプロフィールTwitter前の記事Swiperでクリック式の複数行サムネイル型スライダーを作る【...コンタクトお問い合わせよく読まれている記事1僕が大人になってから100万円をかけて歯列矯正を始めた唯一の理由2歯列矯正って大変?裏側矯正中の僕がストレスを感じる瞬間とその対策3「洋服のお直し屋さん」は体型変化の救世主。ウエスト調整してもらったよ!4失敗しない矯正歯科の選び方|裏側矯正体験者の僕が重視した5つのポイント5休日が暇、スポーツがしたい社会人におすすめ!社会人サークルの見つけ方6矯正装置を外しました!裏側矯正の治療を終えて思うこと・変わったこと7矯正治療の概要を知ろう!裏側矯正に実際にかかった費用の内訳も公開8【保存版】会社員のメリットを8つ具体的にまとめてみた。プロフィール27歳のWeb系フリーランス。大阪大学を卒業後、5年弱会社勤め。現在はWeb制作をメインに、フリーランスとして活動中。ファッション、漫画、おいしいご飯が好き。