Object Oriented CSS
We have been using SCSS files for years and the way we write stylesheets has been evolving and continue to do so. Today we prefer a object-oriented coding paradigm which basically means we think of the HTML strcuture in term of objects or sections (and we try to reuse them as much as possible), so you have standard “objects” in HTML and then CSS classes that are applied to them and other CSS classes that can be added in order to slightly change their behaviour.
The objective is to be able to clearly understand while reading the HTML code and its CSS classes how it’s supposed to be displayed and to figure out very quickly where the CSS is defined (in which folder in the SCSS code structure).
This allows us to have a base of SCSS files that we can reuse through most projects, they contain :
- resets : our own very simple reset that sits on top of Normalize.css, it allows to normalize styles between browsers to make sure they all behave the same.
- project level configuration : main SCSS variables, colors, fonts, sizings
etc
- tools : media queries, clearfix, responsive classes
etc
- base elements : styling of HTML elements themselves
- base object styles : wrapper, grid, lists, blocks,
buttons, links
etc
- components : header, footer, sections, banners etc