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

16.01.2012, 06:17, "Alan Gresley" <alan@css-class.com>:
> On 16/01/2012 9:20 AM, Marat Tanalin | tanalin.com wrote:
>
>> šHello. It would be nice to have ability to specify vertical and horizontal margins, paddings, and border-* subproperties once, without need for duplicating same value in separate subproperties like margin-top/margin-bottom.
>>
>> šVertical margins are margin-top and margin-bottom. Horizontal margins are margin-left and margin-right.
>>
>> šFor example, vertical margins (paddings, border-width, border-style) are _very often_ specified equal. Currently we are forced to inevitably specify same value twice:
>>
>> šššššš.example {
>> ššššššššššmargin-top: ššš1em;
>> ššššššššššmargin-bottom: 1em;
>> šššššš}
>>
>> šIt makes sense to introduce more elegant syntax:
>>
>> šššššš.example {margin-y: 1em; }
>>
>> šOne could argue why not just specify it as {margin: 1em 0}? Answer is that it's inappropriate if we need to _override_ vertical (or horizontal) margins _already specified_ as 'margin' property for more general class. For example:
>>
>> šššššš.general šššššš{margin: šš1em 20px; }
>> šššššš.general.lorem {margin-y: 2em; }
>> šššššš.general.ipsum {margin-y: 3em; }
>>
>> šCurrently we are forced to duplicate either vertical margin (value for more specific class):
>>
>> šššššš.general.lorem {margin-top: 2em; margin-bottom: 2em; }
>> šššššš.general.ipsum {margin-top: 3em; margin-bottom: 3em; }
>>
>> šor horizontal one (repeating value already specified for more general class):
>>
>> šššššš.general.lorem {margin: 2em 20px; }
>> šššššš.general.ipsum {margin: 3em 20px; }
>>
>> šThis is non-DRY and makes CSS-code littered / less readable and eventually making maintenance harder.
>>
>> šIntroducing margin-y and margin-x properties would make things simpler and smarter.
>>
>> š(Same applies to at least padding and border-* properties like border-width as well as any other properties where vertical/horizontal values make sense.)
>>
>> šThanks.
>
> So how does this overrule default margins [1] on block level elements or
> overrule the property 'margin'?
>
> May I suggest this.
>
> ššš.example { margin: y(1em); }
>
> ššš.general šššššš{ margin: 1em 20px; }
> ššš.general.lorem { margin: y(2em); }
> ššš.general.ipsum { margin: y(3em); }
>
> 1. http://css-class.com/test/css/defaults/default-margins.htm
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/

I'm not sure what does "overrule" mean here. Just in case:

{margin-y: 1em} should be 100% equivalent to {margin-top: 1em; margin-bottom: 1em; }.

Received on Monday, 16 January 2012 13:13:12 UTC