Chapter 3: Constants in CSS

ErikWW · February 21st, 2016, 09:21 PM

In Chapter 3, I see that in several places there are widths set to a value of 844px. It begged the question, can you define a constant at the top of the CSS file and set all those items to that constant? My research on this on the web seems to imply while there might be hacks to do this, there really is no CSS approved way of doing this which surprised me.

I guess in the example in the book on page 78, you COULD define the width in just one place by writing:

Code:

header, #PageWrapper, nav, footer
{
  width: 844px;
}

and then proceed to have second sets of blocks for each individual element with the other properties specified. I didn't like this approach so much because then you can't just look in one spot and see all things that apply to the header (for example). But maybe that's not the way I should be thinking about this.

I was just curious how people approach this question.

Thanks

Imar · February 22nd, 2016, 11:36 AM

Yeah, it's a common complaint about CSS. You could take your approach but I don't like it for the reason you mentioned.

An alternative is to use something like Less or Sass which allow you to do exactly that.

More info:

http://sass-lang.com/
http://lesscss.org/

Cheers,

Imar