Golden Guidelines for Writing Clean CSS
Asmentioned,therearesomerulesforwritingcleanCSSthatyoushouldtryyour
besttoavoidbreaking.They’llhelpyouwriteCSSthatislightweightandreusable:
■ Avoidglobalandelementselectors
■ Omitoverlyspecificselectors
■ Usesemanticclassnames
■ Don’ttieCSStoocloselytomarkupstructure
Let’slookattheseonebyone.
Avoid Global Selectors
Globalselectorsincludetheuniversalselector(*),elementselectorssuchasp,
button,andh1,andattributeselectorssuchas[type=checkbox].Styledeclarations
appliedtotheseselectorswillbeappliedtoeverysuchelementacrossthesite.
Here’sanexample:
button {
background: #FFC107;
border: 1px outset #FF9800;
display: block;
font: bold 16px / 1.5 sans-serif;
margin: 1rem auto;
width: 50%;
padding: .5rem;
}Thisseemsinnocuousenough.Butwhatifwewanttocreateabuttonthat’sstyled
differently?Let’sstylea.closebuttonthatwillbeusedtoclosedialogmodules:
CSS Architecture and Organization 77