CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
チーム開発でのCSS命名規則 - Qiita
SMACSSのイメージ Base ... サイトの基本となるスタイル Layout ... 大枠を囲うエリア Module ... 再利用可能なパーツ Project ... 再利用しないページ固有のパーツ State ... 状態 Theme ... サイトのテーマ(配色) 基本ルール CSSのクラスはモジュール化を意識した命名規則に従ってクラス名をつける。 単語間はハイフン区切りでつなぐ。 ※例としてprofileの下層の子要素はprofile-が引き継がれる。 <div class="m-profile"> <img src="user.png" alt="User Name" class="m-profile-icon"> <strong class="m-profile-name">User Name</strong> <div class="m-profile-content"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
