破綻しにくい CSS 設計手法と命名規則 | murashun.jp
［ ＋ expand ］CSS が破綻する理由セレクタに詳細度がある問題スタイルが子要素に継承される問題同じセレクタを多重定義できる問題スタイルが複合的に適用される問題破綻しにくい CSS 設計とはOOCSS構造と見た目の分離BEMSMACSSベースルールレイアウトルールモジュールルールステートルールテーマルールFLOCSSFoundation レイヤーLayout レイヤーObject レイヤーComponent レイヤーProject レイヤーUtility レイヤー禁止・非推奨・許容・推奨まとめ関連記事CSS が破綻する理由 CSS は以下のようなシンプルなフォーマットで構成されます。 selector{ property: value; } HTML 側の内容とセレクタがマッチすればスタイルが適用されます。このように CSS はとても単純な仕組みですが、その単純さゆえに大規模な実装
OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける
フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。 以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。 — ダーシノ (@bc_rikko) 2017年3月1日 ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。（CSSは苦手なので、おかしな点があったらご指摘ください） 今回比較するCSS設計思想は以下の5つ。 OOCSS BEM SMACSS FLOCSS RSCSS 古代のCSS設計 まずはCSSの設計思想に触れる前に、いにしえより伝わりしCSS遺産について触れておく。 多くの場
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
