no-image

CSS設計、マークアップ 設計について。

マークアップ 設計についての記事、参考になる記事がありました。

 

 

 マルチクラス設計

自分だったら

https://codepen.io/abenosite/pen/KjWqEG

html

scss

 

CSSのルール

部品名-バリエーション

 

クラス名多いと大変なので、なるべくシンプルに。

だけど、バージョン違いも考慮します。

主要な要素にたいして、色の命名はしません。

×:btn-yellow

×:btn-green

×:btn-gray

モジュール設計

 

自分だったら・・・

https://codepen.io/abenosite/pen/zVZdyo?editors=1100

html

scss

 

CSSの設計は「SMACSS」をしばらく使ってたのですが、Bootstrapを使った案件のあとで「OOCSS」を取り入れるようになって、現在は迷走中です。

できればクラス名を複数個つけないようにしたいんですよねー。