combining css

Combining Your CSS Selectors

Nowadays, many web designers and developers create stylesheets that are long and filled with numerous selectors. Some stylesheets can look bloated and may contain more code than needed. In this case, it’s best to be able to combine certain selectors in order to maintain a more readable and clean stylesheet.

I’ll explain the reason for this in a second. But first, I’ll talk about bloated code. Below is an example of code that is somewhat unnecessary.

#container {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
}

In that example, there is no need for all that extra code when you can just write it like so:

#container {
    margin: 10px 20px 30px 20px;
}

As you can see, the code is much more clean and easier to distinguish. As far as combining selectors, its easier to select a specific object within your html by declaring a compund selector. Here’s an example of the HTML markup:

<html>
<head>
</head>
<body>
	<div id="container">
		<div id="branding">
			<h1>This is my logo!</h1>
		</div><!--#branding-->
		<div id="content">
			<h2>This is the content area</h2>
			<h3>This is content paragraph. Lorem Ipsum blah blah blah.</span> </h3>
		</div><!--#content-->
	</div> <!--#container-->
</body>

Now let’s say we want to be able to change all the colors of the heading tags. In that case we combine selectors to target those specific elements. But first, here’s an example of the CSS code to do so WITHOUT combining selectors:

h1 {
   color:#333333;
   font-size: 1.8em;
}

h2 {
   color:#333333;
   font-size: 1.4em;
}

h3 {
   color:#333333;
   font-size: 1.2em;
}

As you can see, this method is tedious and can be shortened to combine selectors without having to type more code and have a bloated stylesheet. Here is a better example to combine selectors:

h1, h2, h3 {
   color:#333333;
}
h1 { font-size: 1.8em;}
h2 { font-size: 1.4em;}
h3 { font-size: 1.2em;}

Now you can tell the code is much cleaner, easier to read, and much less bloated. Combining selectors with similar attributes greatly cleans up code and allows for an easier and more productive way to create stylesheets.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>