質問: すみません。すごく初歩的な質問で恐縮なんですが、html5のクラスについて教えてください。 先日HPのコードを提出したのですが、「こんな古臭い書き方じゃ今時通用しないよ。」と言われてしまいました。 いろいろ調べたところ、html5になってからPCにも分かりやすい、セマンティックWEBなる考え方でマークアップするようになってるんですね。 個々の要素全てにクラス名を付けて、独立したブロックにして親要素に依存しない書き方をする。ということらしいですが、このクラス名の付け方がよくわからないのです。 古臭いと言われたところはBEMでコードを書いてあるようだったんですが。ほかにもいろいろ記述方法があるみたいで、どれを参考にすればいいのかも分からないし。なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。 こういう記述方法はどこを参考にすればうまくかけるようになるのでしょう。本とかサイトとかあるのでしたら教えていただきたいです。 すみません。すごい素人くさい質問なんですが、独学でWEBデザインの勉強をしているため、他に聞ける人がいないものでこちらで質問させていただきます。よろしくお願い致します。
回答: 私も同じような境遇に陥った人間で、親近感(というと失礼かもしれませんが)を抱いたので、ぜひお助けしたいです。 書籍であればWeb制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法がとてもおすすめです。 > > なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。 > > > 端的に言ってしまうと、 「一つのクラスやセレクタだけでは表現しきれない。しようとするとコードがスパゲティになる」 と言ったところでしょうか。 また、今はCMSやECなどのフロントエンドとして使うことを考えると、状態に応じて表示が変えやすいというのが利点だと思います。 また、Bemなどを採用することで、それがチームの共通言語ともなり 「あー、このクラスはこの要素のある子要素がこういう状態の時に使うのね」 というのがパッとわかるようになります。 一番それがわかりやすく作られていると思うのが、個人的にはMCSS(Multilayered CSS)です。ソースを読むと、略語はちょっと表を見ないとわからないところではありますが、うまく整理されていることがわかると思います。 余談ですが、私は一応BemとMCSSの合わせ技っぽいのでコーディングしています。ただし個人サイトはまだそう言ったリニューアルはしてません。 それとさらにお節介だと思いますが、ここ最近はCSSを楽に書く仕組みとしてSaSSやStylusという「ビルドするとCSSが吐き出せる」仕組みがあったりします。私はStylus派です。