๐๐ Important things you should avoid in CSS Style Sheet
-
Avoid put px to 0 values.
โ Wrong
.className { padding-top: 0px; }
โ Correct
.className { padding-top: 0; }
Optimize styles.
โ Wrong
.className { padding-top: 0; padding-right: 5px; padding-bottom: 7px; padding-left: 10px; margin-top: -3px; margin-right: -30px; margin-bottom: -8px; margin-left: -4px; }
โ Correct
.className { padding: 0 5px 7px 10px; margin: -3px -30px -8px -4px; }
Use small letters for Color Code
โ Wrong
.className { background-color: #6f8CBA; color: #FFFFFF; }
โ Correct
.className { background-color: #6f8cba; color: #ffffff; }
Do not put unwanted Spaces,Line Breaks
โ Wrong
.className{ font-size : 15px; font-family: sans-serif, arial; }
โ Correct
.className { font-size : 15px; font-family: sans-serif, arial; }
Do not put Duplicate styles
โ Wrong
.className1 { font-size : 15px; font-family: sans-serif, arial; } .className2 { font-size : 15px; font-family: sans-serif, arial; } .className3 { font-size : 15px; font-family: sans-serif, arial; }
โ Correct
.className1, .className2, .className3 { font-size : 15px; font-family: sans-serif, arial; }
Do not create too much Class names
โ Wrong
<div class="section-one"> <div class="section-one-title"> Title 1 </div> </div> <div class="section-two"> <div class="section-two-title"> Title 1 </div> </div>
.section-one { background-color: #000000; } .section-one-title { font-size : 15px; font-family: sans-serif, arial; color: #ffffff; } .section-two { background-color: #57d675; } .section-two-title { font-size : 5px; font-family: sans-serif, arial; }
โ Correct
<div class="section-one"> <div class="title"> Title 1 </div> </div> <div class="section-two"> <div class="title"> Title 1 </div> </div>
.section-one { background-color: #000000; } .section-one .title { font-size : 15px; font-family: sans-serif, arial; color: #ffffff; } .section-two { background-color: #57d675; } .section-two .title { font-size : 5px; font-family: sans-serif, arial; }
-
@b6 Thank you Bro
-
Nice post b6, valuable information.
-
@Malith ๐๐
-
@root โโ
-
very usefull @b6
-
@dev_lak thank you