Creating Buttons with Modular, Reusable CSS Classes, and CSS3

Having CSS that is modular and reusable makes it organized and concise, thereby avoiding situations where you may feel like pulling your hair out. Wouldn't it be awesome to just add the class of .button to an anchor element, no matter where that anchor element is in your markup, and have it transform into a button? CSS is "reusable" if you're able to use its classes anywhere and don't need these classes to be qualified by parent elements as long descendant selectors. The term "modular" refers to the ability to add variations to the button by adding another class to it so that one element can have two classes that could come together to form something very different.

A good example of how to write modular and reusable CSS is this: creating buttons. However, this concept should be applied everywhere, across all components of your website. We have a lot to go over in this chapter. We will cover modular CSS and multiple classes in the first two sections, before we switch gears and talk about how selectors can overrule each other in the specificity rules section. We'll then get into CSS3 pretty heavily with transitions, transforms, and gradients, and we'll go through every step of creating and styling a big call-to-action button.