どうも、ソエです!

今回は、私がポートフォリオを作成した際に決めたClassのルールをご紹介します!
Classのルールの決め方の参考にもなればいいな、とも思っております。

では、どうぞ!

ルール一覧


  • 基本、親-子、子-孫のようにする(例:modal-content、content-listなど)
  • 共通で使うモノの場合、それに合った名前にする。例(モーダルウィンドウ→modal-content、レイアウト関係→l-innerなど。)
  • 基本ルール(1行目)は共通を無視してよい。(l-innerが親だが、その親がmodal-contentならcontent-list)
  • div要素全てにclassをつける。
  • liなど複数ある場合は、skill-list01のようにする。

これらのルールは、SMACSSとBEMを参考にしながら作りました。

div要素全てにclassをつける、という点ですが面倒だと感じる方もいるかと思います。
しかし私自身、divはcssを使うことが多いのでまたCSSをコーディングしなおす場合、つけるのが面倒ということでこのように決めました。

終わりに


てな具合に、私がやりやすいようなルールとなっています。

でも、制作する人がやりやすいルールの方がルールを破る、なんてことは少なくなるはずです。
それから、自分のやりやすいようルールであればclassで悩む時間も減りますし、自分なりのルールを決めてみてはどうでしょうか?

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ デザイン/

私がポートフォリオで決めたClassのルール