referencing in css

[freelance84]

 

Learning html and css when you start, you just cram things in, afterwards you almost turn on auto pilot when writing it, but today i just realised why can't you reference in CSS.... eg:

 

.autoMargins{
  margin-left:auto;
  margin-right:auto;
}
.someContainer{
  .autoMargins;
  /*some more styling*/
}
.anotherContainer{
    .autoMargins;
  /*some more styling*/
}

 

Is or was this ever a consideration for future releases? And if not, why not?

[trq]

This type of functionality isn't part of css, nor is it on the horizons as far as I'm aware.

 

This is why projects like sass exist. http://sass-lang.com/

 

Sass is awesome!

[freelance84]

Hmm, cool thanks, i'll have a read of that!

[Spring]

This type of functionality isn't part of css, nor is it on the horizons as far as I'm aware.

 

This is why projects like sass exist. http://sass-lang.com/

 

Sass is awesome!

Whaaaaaaaaaaat

I've never seen this.

Well I'll be damned

[KevinM1]

There's also LESS: http://lesscss.org/

[Philip]

Yup, both SASS and LESS are awesome tools to use when creating CSS. They make development time a lot quicker - however do note that the output of the CSS is nowhere near as clean as if you were to do it yourself.

[TOA]

Not sure if you're aware, but you just have to put both classes in the html. Essentially the same thing. But I agree it would seem more efficient to do it in the css.

.automargin {
margin:0 auto;
}
.container {
/* styles here */
}
.anothercontainer {
/* styles here */
}

The html code would be:
<div class="automargin container">
</div>

<div class="automargin anothercontainer">
</div>

 

Just thought I'd state the obvious 

 

Never heard of the others, but I'm going to look into them.

[freelance84]

yea I know... that is most likely why i never even stopped to think as i was using that method.

 

But a basic example, take a look at the following:

<div class="big center">some sontent</div>
<div class="small center">some sontent</div>
<div class="other center">some sontent</div>

 

But then the above could look like this if 'center' could have called into others in the css file, thus reducing the size of the css file and html:

<div class="big">some sontent</div>
<div class="small">some sontent</div>
<div class="other">some sontent</div>

 

 

[blackcell]

Why hasn't W3C picked either of these up yet? This is awesome!

[Philip]

yea I know... that is most likely why i never even stopped to think as i was using that method.

 

But a basic example, take a look at the following:

<div class="big center">some sontent</div>
<div class="small center">some sontent</div>
<div class="other center">some sontent</div>

 

But then the above could look like this if 'center' could have called into others in the css file, thus reducing the size of the css file and html:

<div class="big">some sontent</div>
<div class="small">some sontent</div>
<div class="other">some sontent</div>

 

 

 

To be fair, with that example - the CSS file size will increase. With SASS/LESS it basically adds in those properties (last time I checked), so instead of

// css
.center { margin: 0 auto; }
.big { font-size: 120%; }
.normal { font-size: 100%; }
.small { font-size: 80%; }

// html
<div class="center big">...</div>
<div class="center small">..</div>

 

You'll have this:

// css
.big { font-size: 120%; margin: 0 auto; }
.normal { font-size: 100%; margin: 0 auto; }
.small { font-size: 80%; margin: 0 auto; }

// html
<div class="big">...</div>
<div class="small">..</div>

 

So the only time it really reduces it is if you have many calls to the same style choices. The way to save file size/bandwidth in this case would be to combine them:

// css
.big, .normal, .small { margin: 0 auto; }
.big { font-size: 120%; }
.normal { font-size: 100%; }
.small { font-size: 80%; }

// html
<div class="big">...</div>
<div class="small">..</div>

 

However, IMO the whole point of the using ".center .big" is to allow for the HTML to be more versatile during redesigns, which is why I'll continue to stick with it - especially for things like rounded edges / shadows.

[freelance84]

// css
.big, .normal, .small { margin: 0 auto; }
.big { font-size: 120%; }
.normal { font-size: 100%; }
.small { font-size: 80%; }
// html
<div class="big">...</div>
<div class="small">..</div>

 

Yea like a reset sheet. However I often find it easier to remember different rule sets than to remember to create a common set and add to it as you wrote out above, and just think it would be easier to call them into others when required instead of the other way around, it feels a little more like conventional scripting then (to me anyway)