Chapter 4. CSS and HTML – SMACSS, OOCSS and Semantics

In this chapter we'll talk about some CSS and HTML concepts which are vital to a good Sass workflow. While Sass exists to simplify writing CSS, it won't teach you the concepts that makes clean, scalable, reusable CSS. For that, you need to understand some basic concepts and methodologies such as BEM, OOCSS, SMACSS, and Atomic Design.

We'll look at some of the downsides of using CSS frameworks such as Bootstrap and Foundation. Frameworks such as these are not semantic and can often make your HTML and CSS bloated and rigid, making projects harder to maintain if the design changes.

We'll examine what makes HTML semantic and why this is something beneficial. Semantics will allow for cleaner markup, cleaner CSS, and easier maintainability and customization in both.

Next, we'll explore the benefits of using a naming convention in your HTML and CSS. We'll use the methodology of Block Element...