systematic-css

Here's the final markup for one particular "alert-box" instance:Breaking down designs to a very granular level like this allows us to compose lots of differentdesigns from the same base components. We can create a multiplicity of alert box designs. Andwe can reuse many of the same classes to compose entirely unrelated UI components. Hereare some of our newly-forged specialist classes being reused to compose the presentation of amodal popup:Imagine if the "rounded-corners" class also set borders, padding and margins. It would befar less useful. The more specialised the class, the more frequently it can be recycled in thecomposition of different bits of a UI.The open/closed principleComposing complex designs from lots of small, specialised components speeds up the webdesign process because less CSS needs to be written and maintained. It also makes for a morestable codebase. Specialist classes tend not to need updating as much as comprehensiveclasses.Consider the base class we've got now for our alert boxes. It doesn't do much. It just setssome padding. It we wanted to change any aspect of the presentation of an alert box, we'd justextend this base presentation by adding new classes into the mix. We wouldn't need to modifythe "alert-box" class itself..alert-box { padding: 0.5em 2em; }The principles of good CSS 19