blog2018-03-19良い感じにCSS書くために"rscss"という考え方がちょうど良かったので訳しつつまとめとくCSSBEMやらSMACSSやら、CSS設計のアイディアは色々あるのだけど、どうにも複雑で。CSS)を見つけたんだけど、これがちょうどいい感じで、縛りもきつくなくて導入しやすかった。ドキュメントを訳しつつ、まとめておく。Introductionrscss1000行を超えるようなCSSはすぐに手に負えなくなる。このクラスは何を意味するのだろうこのクラスはまだ使用されているのだろうかこのクラスは使ってよいのだろうか、衝突しないかrscssはこれらを把握するための試みであり、フレームワークではなく、保守性の高いCSSを構築するためのアイディアセットである。componentsそれぞれのUIのパーツをComponentとして捉えて名前付けしていく。つなげるケバブケースで名前付けする。}ElementsElementsElementsはComponentの中のもの。名前が2単語以上になりそうなら、何も挟まずに連結させる。}}また、タグをセレクタとするのは避ける。}}VariantsVariantsVariantsは「別形」とか「変種」とかいう意味。ComponentsやElementsに持たせることで、状態や見た目を変える。つけて、曖昧さをなくすようにする。componentsある程度の規模ならComponentをネストする必要も当然でてくる。このとき、例えば、別のComponentに何かしらの方法(JSによる動的なDOM要素追加とか、だろうか)でComponentをネストするとき、Componentのクラス名によるセレクタのネストは避けるべき。...</div>外側のComponentから追加したVariantに対して適用していくようにする。使ってシンプルにするのも手。}}LayoutLayoutsComponentは再利用されるべきなので、位置に関するプロパティをComponentに記述するのは避ける。heightただ、アバターやロゴのような幅や高さが固定されるものについては例外。}}HelpersHelpersHelpersという汎用クラスを別ファイルにまとめて用意しても良い。