CSS講義 第３回

設計思想的な話 前編 ~ OOCSS/SMACSS/BEM ~

---

今日覚えていって欲しいこと

• OOCSSってなんぞ
• SMACSSってなんぞ
• BEMってなんぞ

---

OOCSS/SMACSS/BEM

CSS講義第3回 〜設計思想的な話 前編(OOCSS/SMACSS/BEM)〜

突然のEvernote...！ 過去にしたためた記事があったので、今日の本編はこちらで！

---

おまけ

class名に迷った時は...？

よそのサイトを見たり、 先人の知恵に頼ったり、色んな CSSフレームワーク のUIコンポーネント一覧などを見て着想を得たりしています。

似たような意味を持つclass名の使い分けに迷った時は...？

• .wrapper と .container とか、 .header と .heading とか

極論を言うとキメの問題かと思います。ルールとして設けるのであれば、根拠を明らかにし、他メンバーに共有し、理解を得て、そのルールを守ってもらえるように動ければ別に良いのでは。
あと基本的に迷った時は誰かに相談するのが一番手っ取り早いですね。自分だけが触るもんではないですし。

(蛇足)The Best Way to Implement a “Wrapper” in CSS

CSSプロパティの記述順って...？

引用： [Bootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま](https://www.webprofessional.jp/results-ultimate-css-survey-2017/)(ちょっと前に関家さんがシェアしてくれていた記事だょ)

プロパティの記述順に明確な定義はありません。
ちなみに白崎は個人の感覚によって判断する部分を極力なくしたいためABC順でやってたりします。が、csscombでちゃんと定義設定したら、ABC順じゃなくても特に何も考える必要なくなります。自動で並べ替えてくれるので。

---

まとめ

ある特定の命名規則や設計思想を理解できたとしても、細かいところでいちいち悩みは尽きないのがCSSです。

...なんでだろう

例えばSMACSSは、自分のことを下記のように述べています。

• more style guide than rigid framework (厳密なフレームワークというよりは、スタイルガイドである)
• a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process(デザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法である)

ふむ、どうやら「自動的にメンテナンスしやすいCSSができあがる魔法のような道具」ではなさそうですね

命名規則も設計思想も、平たく言えば「視覚デザインを、開発者に分かりやすい・かつ開発しやすいソースコード化するためのアプローチ」みたいなものだと個人的には思っています。

考え方のヒントはくれても、思考それ自体の肩代わりをしてくれるものではないのではないでしょうか。

なぜなら、命名規則や設計思想が「デザイン理解」をしてくれるわけではなく、

「デザイン理解」は常に我々開発者の仕事だからです。

だから悩んで当然さぁ！

---

次回予告

• MCSS
• FLOCSS
• ECSS
• Atomic Design

ちょっと多いけど、頑張りまっしょい〜。