Feb 16, 2009
Combining css selectors
We often come across css code in dire need of optimization (details have been changed to protect the guilty), and shows a misunderstanding about the power of css:
h1 {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-transform: none;
color: #7D0126;
margin-bottom: 2px;
padding-bottom: 0px;
line-height: 26px;
margin-top: 12px;
padding-top: 0px;
}
h2 {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: none;
color: #7D0126;
margin-bottom: 2px;
padding-bottom: 0px;
line-height: 24px;
margin-top: 0px;
padding-top: 0px;
}
h3 {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 20px;
font-weight: normal;
color: #6B917C;
margin-top: 0px;
margin-bottom: 7px;
}
h4 {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 18px;
font-weight: normal;
padding: 0px;
margin-top: 0px;
margin-bottom: 6px;
}
p {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 17px;
font-weight: normal;
padding: 0px;
margin-top: 0px;
margin-bottom: 6px;
}
/* It keeps going like this but we're going to stop here */
As you can see, several properties are repeated across elements.
These can (and should) be consolidated.
Let’s consolidate them first by applying very common properties to the body element:
body {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 15px;
font-weight: 600;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: left;
white-space: normal;
color: #000000;
}
h1 {
font-size: 18px;
font-weight: bold;
color: #7D0126;
margin-bottom: 2px;
padding-bottom: 0px;
line-height: 26px;
margin-top: 12px;
padding-top: 0px;
}
h2 {
font-size: 16px;
font-weight: bold;
color: #7D0126;
margin-bottom: 2px;
padding-bottom: 0px;
line-height: 24px;
margin-top: 0px;
padding-top: 0px;
}
h3 {
font-size: 14px;
font-style: italic;
line-height: 20px;
color: #6B917C;
margin-top: 0px;
margin-bottom: 7px;
}
h4 {
font-size: 12px;
line-height: 18px;
padding: 0px;
margin-top: 0px;
margin-bottom: 6px;
}
p {
line-height: 17px;
padding: 0px;
margin-top: 0px;
margin-bottom: 11px;
}
Okay, now we see a lot of repetion is still happening here. Much of this repetition can be removed by using the comma (,) selector, which allows you to make lists of elements:
body {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 17px;
font-weight: 600;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: left;
white-space: normal;
color: #000000;
}
h1, h2, h3, h4, p {
margin: 0px;
padding: 0px;
}
h1, h2 {
font-size: 16px;
font-weight: bold;
color: #7D0126;
margin-bottom: 2px;
line-height: 16px;
line-height: 24px;
}
h1 {
font-size: 18px;
line-height: 26px;
margin-top: 12px;
}
h3 {
font-size: 14px;
font-style: italic;
line-height: 20px;
color: #6B917C;
margin-bottom: 7px;
}
h4 {
font-size: 12px;
line-height: 18px;
margin-bottom: 6px;
}
p {
margin-bottom: 6px;
}
There is a pattern to the font-size, margin-height, and line-heights. We will now use this to our advantage to make life even easier.
body {
font-family: Arial, Helvetica, Geneva, Swiss, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: left;
white-space: normal;
color: #000000;
}
h1, h2, h3, h4, p {
margin: 0px;
padding: 0px;
line-height: 150%; /* A good approximation */
margin-bottom: 0.5em /* another approximation */
}
h1, h2 {
font-size: 16px;
font-weight: bold;
color: #7D0126;
margin-bottom: 2px;
}
h1 {
font-size: 18px;
margin-top: 12px;
}
h3 {
font-size: 14px;
font-style: italic;
color: #6B917C;
margin-bottom: 7px;
}
h4 { font-size: 12px; }
With just a few basic css selectors, this code was cut in half.
No Comments, Comment or Ping
Reply to “Combining css selectors”