CSS Dry Principle

The DRY (Don’t Repeat Yourself) principle is a software design theory that stresses the importance of not duplicating code. Every software programmer these days uses a variety of design principles and design patterns in their day to day programming tasks. It helps them improve the quality, performance and maintainability of the software system by avoiding code redundancy.

Other useful CSS articles:

We have to alert schools, banks, insurance companies, doctors, friends, etc. The DRY principle suggests that we should have only one copy of our address stored somewhere and everyone else should refer to that address. That way, if we change addresses, we only have to tell the post office the new address and everyone will see the change. There are a number of different properties to control things like the font used for text, colors, and borders and shading.

Grouping Selectors

Incorporating DRY principle in web design, especially in CSS coding can really enhance our web design experience. Avoiding code duplication is one of the basic principles of CSS coding from the start. To write clean and optimized CSS code is the key to develop faster loading and less bandwidth-burning websites. In the case of a website with 100000 monthly hits, if you can save 10 KB by optimizing the CSS file, you will eventually save more than 10 GB bandwidth a year. The result can be really overwhelming for heavy traffic generating websites.

The normal CSS code will look like this:

h1 {
color: #008000;
font-family arial helvetica sans-serif;
}
h2 {
color: #008000;
font-family arial helvetica sans-serif;
h3 {
color: #008000;
font-family arial helvetica sans-serif;
h4 {
color: #008000;
font-family arial helvetica sans-serif;
}

By grouping the CSS selectors the same code can be re-written like below.

h1, h2, h3, h4 {
color: #008000;
font-family arial helvetica sans-serif;
}

Shorthands Properties

CSS shorthand makes it even easier for us web designers to create fast-loading and easily maintainable websites with lesser effort.

div {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}

Div can be re-written using CSS shorthands in a much simpler manner like below.

div {
padding: 10px 5px 10px 5px;
}

Nesting Selectors

Nesting is a concept where one element is ‘nested’ within another element.

.testDiv h2 {
color: #008000;
}

And in case if you want to make all the italics inside the subheading to be blue in color and underlined. You may use the following CSS code.

.testDiv h2 em {
text-decoration: underline;
color: #008000;
}

By this way we can save considerable amount of valuable space in our CSS and HTML by avoiding code duplication.

Summary

Overall I think the basic ideas behind DRY CSS make sense. Don’t repeat yourself is a good general principle to follow. Dry CSS shouldn’t be too hard to understand if you followed the example code above. Create the groups, name them, and then add the selectors.

Not everyone agrees with the class approach though, and if you’re one of those people then I think you might enjoy DRY CSS. It aims trying to achieve the same basic goals of the class based approaches. I can certainly see the appeal of writing css this way.

In Closing

The idea is to try to plan ahead to prevent duplication, rather than to waste time removing stuff you have already done. What do you think of these guidelines? What additional guidelines do you use when writing css?