HTML and CSS Reference
In-Depth Information
Let's use shorter and primarily direct selectors. Nest them only two to three levels deep,
and remove as many location-based qualifying selectors as possible.
BAD CODE
Click here to view code image
1. #aside #featured ul.news li a { ... }
2. #aside #featured ul.news li a em.special { ... }
GOOD CODE
1. .news a { ... }
2. .news .special { ... }
Use Specific Classes When Necessary
There are times when a CSS selector is so long and specific that it no longer makes sense.
It creates a performance lag and is strenuous to manage. In this case, using a class alone
is advised. While applying a class to the targeted element may create more code within
HTML, it will allow the code to render faster and will remove any managing obstacles.
For example, if an <em> element is nested within an <h1> element inside of an <aside>
element, and all of that is nested within a <section> element, the selector might look
something like aside h1 em . Should the <em> element ever be moved out of the <h1>
element the styles will no longer apply. A better, more flexible selector would use a class,
such as text-offset , to target the <em> element.
BAD CODE
1. section aside h1 em { ... }
GOOD CODE
1. .text-offset { ... }
Use Shorthand Properties & Values
One feature of CSS is the ability to use shorthand properties and values. Most properties
and values have acceptable shorthand alternatives. As an example, rather than using four
different margin -based property and value declarations to set the margins around all four
sides of an element, use one single margin property and value declaration that sets the
values for all four sides at once. Using the shorthand alternative allows us to quickly set
and identify styles.
Search WWH ::




Custom Search