New Perspectives On Web Design

CHAPTER 1 Modern CSS Architecture and Front-End Development

organizing the files

The directory structure will probably mirror the house-build splits in

your code. This is what a CSS directory structure looks like at BSkyB,

for example:

vars.scss

generic/

*.scss

base/

*.scss

objects/

*.scss

gui/

*.scss

style.scss

Please be aware that the above is written out in implementation order,

rather than alphabetical order, as you might be used to seeing. That order

means that:

1. We have a variables file which holds things like brand colors and font sizes.


2. Then we have a generic directory with our reset, clearfix and so on.


3. Next up is our base directory, which holds our unclassed elements like
   h2s,tables, etc.


4. Then we have a series of objects and abstractions, like the media object.


5. On top of that we sit our GUI layer: carousels, accordions, headers,
   footers and the like.


6. That all then gets compiled into the product-specific CSS file, made
   from our master style.scss Sass file.

So now we are left with a very organized directory of Sass files, each

containing small, discrete chunks of CSS. It is these chunks, organized in

this manner, that will allow us to combine — and ultimately scale — our

CSS indefinitely.