CSS Design Patterns
Wednesday, April 25th, 2007The other night I spent some time thinking about patterns and CSS. I wanted to find some intuitive way of developing/creating the styles for widgets, fonts, lists, etc.. without just mashing together styles were ever they fit. I came across an interesting discussion about the concept here. The one idea that stood out was the “Inheritance” pattern:
..CSS doesn’t have inheritance in the way that OOP languages do, but you can use something close to it using MultipleClasses. Here’s an example:
Code:<style> .baseClass { color: #fff; background: #009; margin: 10px; padding: 10px; } .childClass1 { color: #f99; } .childClass2 { text-transform: uppercase; } </style> <div class="baseClass">Some content here</div> <div class="baseClass childClass1">Some content here</div> <div class="baseClass childClass2">Some content here</div>By applying both a base class and a child class (or classes) you get the properties of both, with the child overriding the base, much like in OOP inheritance. This is a design pattern rather than a specific technique because it can be applied to all kinds of situations..

