そもそもCSSの設計思想とはなんぞや
CSSを扱う上でセレクタは欠かせませんが、
自分一人ならいざしらず他の人も同時に作業する場合、
みんなが「オレオレ」で「いい感じ」してしまった末路として、
一つのセレクタが複数箇所で意図しない重複をしていまい、バグ発生。(デザイン崩れ)
や
一つの箇所は__(アンダースコア)が多用されているものの、
もう一つの箇所では—(ハイフン)が多用されている、
統一感が、、、😭
なんてこともあったでしょう、、
そこで、、、なんとなく統一のルールを設けましょう!!!
それが。。。
「CSSの設計思想」です!!
以下ルールの種類を書いてきます。
設計思想カタログ
rscss
Reasonable System for CSS Stylesheet Structure ……の略。
(CSSスタイルシート構造の合理的なシステム)
シンプルでよい。
あまりルールが厳格でなく、
「こういうときにはこんなかんじがいいんじゃね?」的なアイデア集、
デザインパターンみたいになっている。
おすすめ度 ★★★★★
GEM
BEM(Block Element Modifier)の略。
思想としてはいい感じだけど、
実際にはhtml上にセレクタの記述が多くなってしまう。
わかりやすいはずが、なんだかごちゃごちゃしちゃったなぁ、、のパターンだよ。
いまいち。
おすすめ度 ★★★☆☆
OOCSS
OO…?うっ頭が!!!
そう、(Object Oriented CSS)の略です。
オブジェクト指向です。
面白そう!
…と思った時代が私にもありました、、、
CSSの「オブジェクト」ってどういうこと?
入れ子をもの = オブジェクト!
入れるものも、、 = オブジェクト!
それぞれを独立させることで再利用性を高める、、、
みたいな感じ、、、らしい。
いやいや!!!ネストできるのがsassの強みなんだから、それ捨てたら意味ないでしょ!
cssなんてもとから再利用できるようなもんなんだから、プログラムと比べたら、、
なんか目的と手段が入れ替わっちゃてるパターンなような気がするね、、、
オブジェクト指向のパラダイムにとらわれっちゃてるよ、、
おすすめ度 ★☆☆☆☆
https://www.slideshare.net/stubbornella/object-oriented-css
感想
そんなに厳格にやるものじゃない気がする。
なぜならこれはそんなに生産的なものではないから。
あくまでできればこんなかんじで、、、!(オナシャス)くらいで!
やるのがいいと思います。
おすすめはやはりrscssです!!
らっしゃい!
最近のコメント