We're working on redesigning our full website, we have a critical impact on our business from SEO. We are trying to use a lot of formatters, spacers, etc classes from SASS like suggested by bootstrap. Here is a sample :
<div class="col-12 col-md-5 offset-md-2 br-shadow br-bg-light p-a-xl br-primary br-lg-secondary">some content</div>
Here all classes are useful and provide unique various styles to our page and are all re-used multiple times on each page, not always together.
What do they do this?
.col-12 => bootstrap
.col-md-5 => bootstrap
.offset-md-2 => bootstrap
.br-shadow => provides shadow
.br-bg-light => defines background color to our "light" color
.p-a-xl => provides "xl" padding to all sides
.br-primary => defines text color to our "primary" color by default
.br-lg-secondary => defines text color to our "secondary" color when on large screen
Style is more maintanable like this, less side effects. CSS static files are more lights... but HTML becomes a lot more and more verbose and fat of course.
Is it preferrable to have 50KB of HTML and 10KB of CSS (in separated files) or to have 40KB of HTML and 20KB of CSS (in separated files) ?