HTMLを記述して、そのコードを下記のサイトにコピー＆ペーストして
CSSのアウトラインを生成することができます。
私の場合は「Childrens CSS」を使います。
下記のHTMLを貼り付け「Childrens CSS」ボタンをクリック。
<div class="box">
<img src="./photo.jpg" alt="test photo" class="photo">
<p class="txt">text sample text sample</p>
<p class="cmt">comment sample comment sample</p>
</div>下記のようなCSSが生成されます。
div.box {
}
div.box img.photo {
}
div.box p.txt {
}
div.box p.cmt {
}
エディターでdivを削除していくと余分なコードを省けます。
.box {
}
.box img.photo {
}
.box p.txt {
}
.box p.cmt {
}場合によってはimgやpも削除しても良いです。
（残しておいたほうがHTMLの構造が分かりやすい場合もあります。）
セレクタの命名にdivを含めない（例：diveやdivingなど）ようにしておくと、divを一斉置換で削除でき、より効率的なコーディング作業が実現できます。
