Skip to content

H
Hello Gargan

3.2—CSS integration model

Last edited by arturo
Page history

CSS model standard

  • Reserve CSS Gridbox stricly for two dimensional layout cases and non dynamic layouts

Why? As stated in this article by Per Harald Borgen, CSS Gridbox are layout-first. Meaning that the grid determines the items placement and position. Whereas CSS Flexbox are content-first, meaning that the items can decide how they are placed.

These guides made by the CSS-Tricks team are the most complete about CSS Flexbox and CSS Gridbox

  • Use the box model margin property only if you have mastered it

Why? margin use is prone to a phenomenom called margin collapse. Lack of knowledge on this particular subject leads to unwanted side effects. Please read these two articles from the MDN and Pineco teams for detailed explanations.

In a nutshell, we differenciate three skill levels:

  1. as noted by Chris Coyier, margin is best leave out
  2. as written by Harry Roberts, the ideal use is to restrict the margin to single-direction declarations
  3. as claimed by Hugo Giraudel, when fully mastered, margin makes layouting elements much less frustrating
  • Every elements are set to box-sizing: border-box

Why? Even if border-box is not the default box-sizing value, it feels more natural and is advocated for years by the community to be the CSS standard (eg. by Paul Irish from the Google Chrome core team, or Chris Coyier from the CSS-Tricks team).

  • Stick to the px unit for every standard lengths, instead of relative units (em, rem)

Why? Our minds are trained in pixels when it comes to user interfaces, relative units are counter-intuitive by essence. The thorough analyze of Gion Kunz in this article relates all the flaws with rem and em, and should only be used for few specific use cases.

Useful resources

SASS guidelines

  • Our guidelines mostly follows the model proposed by Hugo Giraudel.

Why? At this day these SASS guidelines are the most structured and popular one. The opinionated key principles and convention picked out by the author, such as the BEM naming, are purely empirical and respect our own conceived ideas. Main difference here, is that we have strictly opposed a main and bootstrap folders. The reason is that Bootstrap (even the recent v5) is still not compliant with SASS Modules API (which will deprecates the old @import API in October 2022)

  • We also select the Eduardo Bouca's approach (from the CSS-Tricks team) for media queries specifications

Why? Even it complexifies a little bit media querie declarations, it provides a clear syntax capable of simply dealing with specific screen resolution (eg. "retina" or "x2" screens)

Useful resources