CSS設計手法についてのリンク集（更新中）
2019年1月11日
職場で運営しているウェブサイトのデザイン・リフレッシュとCSSのリファクタリングを考えていて、その際に既存のCSS設計手法を選んで実装しようと思っています。
で、まずは手始めにリンク集と雑感のメモを。メモなので、すごく適当なので悪しからず！です。検証と比較はこれから。1つか2つ（3つ）に絞ってプロトタイプを作って検証しようかと思ってます。
目次
FLOCSS
FLOCSSは日本人の方が考案されたんですね。ドキュメントが日英で揃っているのが嬉しい。BEMとOOCSSのいいとこ取り的な存在。あと@murokacoさんと@Gaku0318さんのおすすめでもある。この辺りから攻めていこうと考え中。
BEM
一番シンプルだしこれでいいんじゃないかとも思わなくはない。考え方自体はどの手法でもベースとなっている、または利用されているっぽいし。でも、書き方は慣れるまでは気持ち悪そう。どこぞのドキュメントにもblock__element--modifierといった書き方が気持ち悪いのはわかるけど、重要なのはそこじゃないと書いてあった（どこだったっけか、見失ってしまいました）。
あ、2つ目のリンクの以下だった。
Uuuugly!
A common argument against BEM is that it’s ugly; I dare say that if you shy away from code based purely on its looks then you’re often missing the point. Unless the code becomes unnecessarily difficult to maintain, or genuinely more difficult to read, then perhaps you do need to think twice before using it, but if it ‘just looks odd’ but has a valid purpose, then it should definitely be fully considered before writing it off.
I agree that BEM does look weird, but the power it brings far outweighs any negatives to do with its appearance by an order of magnitude…
BEM may look a little funny – and it might require more typing (most text editors have autocomplete, and gzip will negate any differences in filesize) – but it is so powerful.
OOCSS
オブジェクト指向（Object Oriented）ということで、Reactなどと相性いいのかなと思いつつ。勝手な想像なのであてになりません。説明が難しそう。チームで共有しなきゃいけないから説明は簡単なほうがいい。あと、ドキュメントがわかりにくそう？
そもそもReactではこういうの必要ない説も？
YUIのリセットとフォントを使ってるって書いてあるな。
SMACSS
必要以上に複雑な印象。SMACSSについてまとめられた本がPDFでダウンロードできるから「これ読んどいて」で済むのか、済まないのか。済まないか。日本語しかダメだと無理。どなたか翻訳してるかも？
ECSS
ECSSのEはEndureのEなのか。@Gaku0318さんのおすすめ。下のQiita記事の筆者はGaku0318さんでした！びっくりw
OOCSSがDRY（Don't repeat yourself：繰り返しを避けること）を目指しているのとは対照的に、ECSSでは繰り返しを許容し、適切に分離（decoupling）することを目指しているのが特徴です。
なるほど。なるほど。こういう考えはすごく好き。DRYはそこまで突き詰めたくないタイプ。最近はツールがなんとかしてくれる部分も多いし。
ITCSS
こんなのも。BEM、SMACCS、OOCSSともコンパチブルと言っているので、それら手法の拡張的なものなのかな？