【CSS】CSSの記述する際におさせておきたいポイント

/ Web技術 / By takec23com

構造と見た目のCSSを分ける

構造と見た目を分けることによって、見た目がスッキリするのと、HTMLの構造が変わってもすぐに修正することができるので、メンテナンス性が高くなります。

<button class="button button-01">ボタン1</button>
<button class="button button-02">ボタン2</button>

.button{
 width: 100px;
 margin-top: 10px;
}
.button-01{
 color: red;
}
.button-02{
 color: blue;
}

コードの量はなるべく減らすようにする

<!-- Bad... -->
<div class="box01"><p>テキスト</p></div>
<div class="box02"><p>テキスト</p></div>

/* Bad... */
.box01{
 width: 100px;
 height: 100px;
 text-align: center;
 margin-top: 10px;
 background-color: red;
}
.box01 p{
 color: #000 ;
}
.box02{
 width: 100px;
 height: 100px;
 text-align: center;
 margin-top: 10px;
 background-color: blue;
}
.box02 p{
 color: #000 ;
}


<!-- GOOD! -->
<div class="box box01"><p>テキスト</p></div>
<div class="box box02"><p>テキスト</p></div>

/* GOOD! */
.box{
 width: 100px;
 height: 100px;
 text-align: center;
 margin-top: 10px;
}
.box01{
 background-color: red;
}
.box02{
 background-color: blue;
}
.box p{
 color: #000 ;
}

(Visited 12 times, 1 visits today)