宣言ブロックのCSS設計｜Web Design KOJIKA17

2017/07/18 682 users Web Design KOJIKA17 セレクタ CSS

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の... 続きを読む

CSSが破綻する4つの理由 - Qiita

2015/04/30 566 users Qiita JSON 当人 CSS フォーマット

前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっ... 続きを読む

破綻しにくいCSS設計の法則 15 - Qiita

2015/04/17 666 users Qiita 法則

ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Ut... 続きを読む

もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

2013/09/12 930 users プロパティ コーディング規約 規模 構造 ルール

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう "制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボッ... 続きを読む