Kind of a follow-up to Should I write HTML or CSS first?
On a relatively large website, we are considering to use SASS and/or Bootstrap. From previous projects, there seem to be different ways to go about it:
- A framework (e.g. bootstrap) provides a bunch of css classes (esp for the grid layout). We may even add to that with our own reusable classes. We then create the html to use these classes.
If we want to change the layout, we have to modify the HTML, not the CSS. A class for a sidebar would be like
I call this the "CSS first" strategy.
- We first create our HTML, using semantic classes. A sidebar would be classed
sidebar-left, or even
sidebar-firstto not imply anything about how it will be displayed. Then we use custom CSS that targets this region.
Probably using a SASS mixin for the grid column layout.
If we want to change the layout (e.g. make the sidebar smaller), we modify the CSS, not the HTML.
I call this the "HTML first" strategy.
Usually we want to do this with "components", where parts of the page are independent of each other, and we avoid arbitrary deep selectors.
- Traditionally in Drupal (this is what we work with), a lot of the HTML is already provided by core and 3rd party modules. Traditionally, we would leave most of the HTML as it is, and then target it with ugly deeply nested selectors.
This is also "HTML first", but without components. I try to avoid this pattern.
Often the classes provided in the generated html are based on configuration living in the database, and created with the UI. So then we have CSS (=code) depending on stuff in the database. It would be more maintainable in the other direction, if stuff in the database depends on CSS.
- Content authors want to be able to add some special effects in their authored html (which is filtered, of course). E.g. wrapper boxes for images. We provide some classes that they can use.
This would fall into the "CSS first" strategy, although it is a special use case.
- In a CMS, we might have some components that you can choose from the UI, to configure how something should be displayed. These components might have human names that show how it looks like, e.g. "slider", "grid", "blue box".
Maybe this is again "CSS first".
The strategies 1. and 2. seem quite opposite to each other. I can think of examples where one or the other approach would be preferable. But I wonder if there are some general rules of thumb which approach is better, or where to use which.
It seems a main difference is whether I prefer to update the HTML or the CSS, if I want to make a layout / appearance change.
This also leads to the question of how "semantic" your class names should be.
- With the "CSS first" approach, I would write CSS for a class "shiny-blue-button" and another "shiny-red-button". If I want to change the appearance, I will change the HTML to use the red button instead of the blue one.
- With the "HTML first" approach, I would write HTML with a class "panic-button" and another "submit-button", and then style them accordingly. Here the classes are way more semantic, but much less reusable.