よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ

[arx0balest]

css 界隈、いい加減たかが css の global scope 問題のためだけに、BEMM だの Sass だの狂った複雑性を持ち込むのやめんかね。style componentsやLinariaで標準のcssだけ書けばいいよ。React以外は知らん。

[ultimatebreak]

感覚麻痺してると思うんだけど、昨今のフロントエンドは全部狂った複雑性の集まりだぞ

[mayumayu_nimolove]

多すぎだよ。これだとサイト仕上げるよりルールを守ることだけに気が行ってしまう。CSSの沼に見事にハマってる。あとやったことないけどtailwind使ってるのに別のリセット使ったら不具合起きない？

[Lhankor_Mhy]

詳細度をそんなに頻繁に変えるならそもそもBEMいらんのでは……などと思ってしまう。ネストの深度を表現するだけのためのツールとして使ってるイメージ？

[glass-_-onion]

Sassで変数やら関数やらBEMやら頑張るくらいならTailwind使っとけ。Tailwindの登場でスタイルシートの世界は変わったと思う。

[kvx]

詳細度気にしながらtailwindcss使う環境というのはどんな環境だろう。アプリなのかサイトなのか。/書いてあることはやってれば覚える内容だから特別めんどくさがる必要はないと思う。

[strawberryhunter]

何が最適なのか未だに答えが出せないわ。CSSクラスを指定した要素だけにスタイルが適用される方が扱いやすいようだ。TailwindもBEMもこの法則にしたがうので、ここまでは確かなんだろうと思っている。

[otchy210]

えー、SCSS 使う時も BEM にするん？せっかくブロックをネスト出来るのに？人間が命名ルールに合わせてクラス名をコピーして回るの？超違和感。

[yasu-log]

良い内容

[n314]

3つぐらい参考になればいいかと思ってなるほどーって読んでたけど、ブコメを見ると結構批判的だ。自分がCSS詳しくないから…？

[gg119104]

すまん、Tailwind使うわ

[webstriver]

なるほど便利！だけどめんどくささの絶望感（笑

[misarine3]

正直「うぜえ」以外の感想がわかないのである

[remonoil]

.BlockName__ElementName--modifierNameじゃなくて.BlockName_ElementName-modifierNameにしてる。2個打つ必要性が無い