Ban CSS Margins

1
Ban CSS Margins

We must ban margin from our parts. Hear me out.

Margin breaks factor encapsulation. A successfully-constructed factor must now not win an impression on the relaxation originate air itself.

Margin makes reusability extra difficult. Upright parts are usable in any context or structure.

Margin conflicts with how designers think. Designers think place aside in relation and context. They outline how some distance an part must be from but any other factor in a particular event.

By banning margin from all parts that you just might well like to comprise extra reusable and encapsulated parts.

Transferring accountability

As a alternative of margin I if truth be told win started using spacer parts, which pass the accountability of managing place aside to the mum or father-stage.

As an illustration, the Braid comprise machine popularized the Stack factor:

<Stack space={3}>
  <Item />
  <Item />
  <Item />
Stack>

The usage of spacer parts has implications which are now not apparent a priori.

Spacer parts (similar to Stack above) can restrict spacing values to steps on a scale. That formula, all spacing mechanically aligns to the grid.

Spacer parts outline how some distance an part must be from but any other factor in a particular event. You win to stipulate place aside in relation and context.

Who else thinks about place aside in relation and context? Designers.

Spacer parts lift us closer to how designers think. They comprise our designs extra constant they in most cases power us to comprise extra reusable and encapsulated parts

Be half of the pack! Be half of 8000+ others registered users, and get chat, comprise groups, submit updates and comprise mates across the area!
www.knowasiak.com/register/

Leave a Reply

2 thoughts on “Ban CSS Margins

  1. Aditya avatar

    A more accurate title would be “Ban Outer CSS Margins from Components”.

  2. Aditya avatar

    So ban a huge part of the CSS box model. Got it… Margins are valid in many use-cases, specifically many people leverage them for typography. They can even still be valid with component-driven development as well.