フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。 以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。 — ダーシノ (@bc_rikko) 2017年3月1日 ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。(CSSは苦手なので、おかしな点があったらご指摘ください) 今回比較するCSS設計思想は以下の5つ。 OOCSS BEM SMACSS FLOCSS RSCSS 古代のCSS設計 まずはCSSの設計思想に触れる前に、いにしえより伝わりしCSS遺産について触れておく。 多くの場
![OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbe9a297d5ec58a9e2f116e8d06e4081dbf65cf7/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEh2RcyL2FxBtmz3EYM9YVRNQx0EYVx87PQYf85nV0uhEv9Ge_iegKiF2gWa8AE51S7o2oFnQx5rmCLKrFxqJijmX0mM9dM4FqSNFL1WDalPnZqXtRcXLCEee2dirkNkqGlkhkoYU7Pxhy3Y%2Fw1200-h630-p-k-no-nu%2Fcss.png)