Implementation: A Better CSS

Even developers can’t understand it

Image for post
Image for post
This is a too common pattern among developers. Why is that?

Containers and contents

Let’s start by one of the most common source of confusions: the display property:

  • inline defines a box that will be inserted in the horizontal reading flow (including line feed mechanism). Its space will be automatically allocated to suit its contents (so it is useless to try to set its size or position).
  • inline-block is a block that can be positioned as inline.
  • inline is a content (strictly speaking, an inline element can still contain other inline elements, but those won’t be allowed to be blocks, and so will not be positionable as such) ;
  • inline-block is a content that can act as a container.

What’s in a box?

CSS layout boxes, and defines a “box model” which basically nests 4 sub-boxes one in each other : content inside padding inside border inside margin.

  • padding (the space between the border and the nested content) as a content-margin.

Positioning

One another source of confusion is positioning, as some positioning properties may have no effect depending on your display setting.

  • fixed is just a special case of absolute, that actually positions relatively to the viewport (so scrolling viewport contents won’t affect that position).
  • relative to move the box relatively to its current position (10px to from its left bound, 2em above its top bound, etc.)
  • static is the default, which is actually (almost) the same as a relative with no offset. This is probably the most confusing name, as it doesn’t relate to some fixed positioning but actually “no move”, i.e. no offset from its default position.
  • relative or static is actually content-relative positioning.

Conclusion

We defined some kind of “better” CSS (BCSS) language by reducing its number of concepts (container and content) and normalizing its properties around those:

  • the content-color explicitly tells that the color is the one of the content ;
  • content-margin clarifies that that margin is inside the content
  • container-margin clarifies that that margin is outside the content
  • position now clearly states being relative to the container through the <offset> from container-<top|right|bottom|left> syntax and (implicitly but more simply) relative to the content current position through the <offset> <up|forward|down|backward> syntax. Default behavior can be stated explicitly using the unchanged value.

Written by

Software engineer for three decades, I would like to share my memory. Also author of https://rr0.medium.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store