Q&A
誰に言われたのかわかりませんが、極論だと思います。
すみません。すごく初歩的な質問で恐縮なんですが、html5のクラスについて教えてください。
先日HPのコードを提出したのですが、「こんな古臭い書き方じゃ今時通用しないよ。」と言われてしまいました。
いろいろ調べたところ、html5になってからPCにも分かりやすい、セマンティックWEBなる考え方でマークアップするようになってるんですね。
個々の要素全てにクラス名を付けて、独立したブロックにして親要素に依存しない書き方をする。ということらしいですが、このクラス名の付け方がよくわからないのです。
古臭いと言われたところはBEMでコードを書いてあるようだったんですが。ほかにもいろいろ記述方法があるみたいで、どれを参考にすればいいのかも分からないし。なんで1つの要素に２つも３つもクラスがついてるんですか？それさえもわからないです。
こういう記述方法はどこを参考にすればうまくかけるようになるのでしょう。本とかサイトとかあるのでしたら教えていただきたいです。
すみません。すごい素人くさい質問なんですが、独学でWEBデザインの勉強をしているため、他に聞ける人がいないものでこちらで質問させていただきます。よろしくお願い致します。
そうなのですか？でも今の書き方ってil1つ1つにもクラスつけてあったりしますよね？あとnavとかnav navbar navbar-defolt...みたいな感じでやたらクラスついてたりしますよね？？あれはなぜなんででしょうか。
回答2件
0
ベストアンサー
私も同じような境遇に陥った人間で、親近感（というと失礼かもしれませんが）を抱いたので、ぜひお助けしたいです。
書籍であればWeb制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法がとてもおすすめです。
なんで1つの要素に２つも３つもクラスがついてるんですか？それさえもわからないです。
端的に言ってしまうと、
「一つのクラスやセレクタだけでは表現しきれない。しようとするとコードがスパゲティになる」
と言ったところでしょうか。
また、今はCMSやECなどのフロントエンドとして使うことを考えると、状態に応じて表示が変えやすいというのが利点だと思います。
また、Bemなどを採用することで、それがチームの共通言語ともなり
「あー、このクラスはこの要素のある子要素がこういう状態の時に使うのね」
というのがパッとわかるようになります。
一番それがわかりやすく作られていると思うのが、個人的にはMCSS(Multilayered CSS)です。ソースを読むと、略語はちょっと表を見ないとわからないところではありますが、うまく整理されていることがわかると思います。
余談ですが、私は一応BemとMCSSの合わせ技っぽいのでコーディングしています。ただし個人サイトはまだそう言ったリニューアルはしてません。
それとさらにお節介だと思いますが、ここ最近はCSSを楽に書く仕組みとしてSaSSやStylusという「ビルドするとCSSが吐き出せる」仕組みがあったりします。私はStylus派です。
投稿2017/03/07 03:20
総合スコア2244
ありがとうございます！やっぱり最初は分からないものなんですね。安心しました（笑）早速本買って勉強します！！
わからないものですね。僕も7年前の知識で挑んでいったら「使えない」と言われまして、例の本を勧められたので一読して目からウロコでした。
なんと言いますか、HTML,CSSはなんとなく書いても形になるのがいいところでもあり、悪いところでもある。で、最近悪いところが顕著に出てきたのでWebコーダーの人たちの間でのみ知識が共有されているという偏見があります。
なのでバックエンドのプログラマでBemとかMCSSを意識してコーディングできる人って、逆に少ないのではと思ったりします。
なるほど。コーディングって覚えることが沢山で大変ですけど、thmlもしばらくはバージョンアップしないだろうし、ここが踏ん張りどころと思って頑張ります。まあ、覚えてしまえばこっちのものですしね！
回答後、色々考えてやっぱりお節介コメントをすることにいたします。
> なんで1つの要素に２つも３つもクラスがついてるんですか？
という質問文がちょっと気になったのと、自分も最近個人サイトをリニューアルするときに気づきがあったので。
最近のコーディングだとBootstrapやZerb FoundationやSemantic UIといったHTML/CSS/JSフレームワークを使ってレイアウトを組むことがありますが、あれらはあくまで *レイアウトを組むだけ* で、自分が望む装飾はまた別に実装する必要があることがままあります。
そういうことでMCSSではBaseレイヤーCSSにBootstrapを使って、さらに自分のページらしく仕上げるのにProjectレイヤーCSSやCosmeticレイヤーCSSで独自のCSSを組みます。
さて、なんで一つの要素にいくつもclassがつくようになったのかという話ですが、これはIE10のバグが発端で、IE10ではセレクタを駆使してCSSを指定すると、CSSの優先順位を決める点数が1000点を超えた指定は適応されない。というようなバグがあったらしいです。
そこでclassは一つの要素に複数付けることが可能なのと、クラス名でその要素の状態や所属などを判別するのが容易な点で、
「じゃあクラスでうまく装飾するべきじゃね？」
という風にフロントエンド技術が発展していったものと自分は思います。
ということで、HTMLやCSSのバージョンだけの話ではなく、その後の保守や改造のしやすい設計をしやすいHTMLやCSSを書くように意識できるようになると、多分他の人も幸せになれると思います。
今までの（今もかな？）HTMLやCSSは何となくで書いてそれなりに綺麗にかけちゃったのですが、CMSなどのシステムが発展してきた今、バックグラウンドから吐き出したデータを綺麗にするための綺麗なHTML/CSSの実装というのが求められている昨今だと思います。
と、少し熱く語ってしまいましたが、少しでも「設計も大事」が伝わると幸いです。
0
投稿2017/03/07 03:14
総合スコア48
あなたの回答
tips
プレビュー
