This chapter covers
- Building a pattern library to document your modules
- Incorporating a pattern library into your development process
- Applying a CSS First approach to writing styles
- Safely editing and deleting CSS
- Utilizing CSS frameworks such as Bootstrap
After you start writing your CSS in a modular way, it’ll begin to shift the way you approach the task of authoring web pages and web applications. At first, the pages you build may not seem different. But at some point, you’ll go to put together a particular page, and you’ll find that you have already created many of the modules it requires. For example, if you need a media object, or a dropdown or a navigation menu, and you’ve already created one, you already have the styles ready for it. You’ll need only to add the correct class names to a few elements structured in the correct manner.
Because the modules are reusable, you’ll be able to build those portions of the page without adding any new CSS to your stylesheet. Instead of writing an HTML page then applying styles, you’ll find yourself taking modules that already exist, and using them to piece together a new page. The further you progress into the project, the less you’ll need to write new CSS. Instead of new styles, what you’ll need is an inventory of all the modules already available in your stylesheet.