cssの設計思想についてrscss・gem等
そもそも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です!!
らっしゃい!