投稿数 585
公開から 2940

cssの設計思想についてrscss・gem等


そもそもCSSの設計思想とはなんぞや

CSSを扱う上でセレクタは欠かせませんが、 自分一人ならいざしらず他の人も同時に作業する場合、 みんなが「オレオレ」で「いい感じ」してしまった末路として、 一つのセレクタが複数箇所で意図しない重複をしていまい、バグ発生。(デザイン崩れ) や 一つの箇所は__(アンダースコア)が多用されているものの、 もう一つの箇所では---(ハイフン)が多用されている、 統一感が、、、😭

なんてこともあったでしょう、、

そこで、、、なんとなく統一のルールを設けましょう!!! それが。。。 「CSSの設計思想」です!!

以下ルールの種類を書いてきます。

設計思想カタログ

rscss

Reasonable System for CSS Stylesheet Structure …の略。 (CSSスタイルシート構造の合理的なシステム)

シンプルでよい。

あまりルールが厳格でなく、 「こういうときにはこんなかんじがいいんじゃね?」的なアイデア集、 デザインパターンみたいになっている。

おすすめ度 ★★★★★

https://rscss.io/

GEM

BEM(Block Element Modifier)の略。

思想としてはいい感じだけど、 実際にはhtml上にセレクタの記述が多くなってしまう。 わかりやすいはずが、なんだかごちゃごちゃしちゃったなぁ、、のパターンだよ。

いまいち。

おすすめ度 ★★★☆☆

http://getbem.com/

OOCSS

OO…?うっ頭が!!!

そう、(Object Oriented CSS)の略です。 オブジェクト指向です。

面白そう!

…と思った時代が私にもありました、、、

CSSの「オブジェクト」ってどういうこと?

入れ子をもの = オブジェクト! 入れるものも、、 = オブジェクト!

それぞれを独立させることで再利用性を高める、、、 みたいな感じ、、、らしい。

いやいや!!!ネストできるのがsassの強みなんだから、それ捨てたら意味ないでしょ!

cssなんてもとから再利用できるようなもんなんだから、プログラムと比べたら、、

なんか目的と手段が入れ替わっちゃてるパターンなような気がするね、、、

オブジェクト指向のパラダイムにとらわれっちゃてるよ、、

おすすめ度 ★☆☆☆☆

https://www.slideshare.net/stubbornella/object-oriented-css

感想

そんなに厳格にやるものじゃない気がする。 なぜならこれはそんなに生産的なものではないから。 あくまでできればこんなかんじで、、、!(オナシャス)くらいで!

やるのがいいと思います。

おすすめはやはりrscssです!!

らっしゃい!