Re: Add margin-x and margin-y properties (same for padding and border-*)

16.01.2012, 17:20, "Kang-Hao (Kenny) Lu" <kennyluck@csail.mit.edu>:

> My take is an 'initial'/'inherit'-like keyword that means "ignore this
> value", so
>
> .example { margin: 1em _ ; }
>
> .general { margin: 1em 20px; }
> .general { margin: 2em _ ; }
> .general { margin: 3em _ ; }
>
> I am not sure if '_' is already reserved for vendor extension. This
> keyword is meant to be just syntactic sugar so { display: block;
> display: _ ; } would just be { display: block; } as if the whole
> declaration is dropped. Not sure how this keyword works for other
> shorthand properties though. (Not to mention that I am not too convinced
> that this is too important a problem we should address.)
>
> Cheers,
> Kenny

It's a fairly acceptable alternative. Though '?' (question-mark) would be more appropriate/intuitive as placeholder character.

Compared with margin-x/-y, downside is that we are forced to repeat placeholder character again and again. Benefit is that we are able to override not only vertical or horizontal values, but any of four values:

    .general {margin: 1em 20px; }
    .general.dolor {margin: 2em 10px ? 5px; }
    .general.amet  {margin: 3em ? ?; }

The example would be equivalent to:

    .general {margin: 1em 20px; }
    .general.dolor {margin-top: 2em; margin-right: 10px; margin-left: 5px; }
    .general.amet  {margin-top: 3em; }

Received on Monday, 16 January 2012 16:48:55 UTC