The limits of @import and CSS file organizing rage.

[Martin_Muzatko]

I really love working with organized css files (using the [SMACSS](http://smacss.com/ “SMACSS”) Method).
I cought myself using CSS imports a lot, because I have up to 15 or 20 Stylesheets per Project.

Let me tell you which:
**base.css** – base rules;

**layout.css** – layout rules;

**state.css** – floats, clears and all that states;

**theme .css** – all the theming stuff;

**modules** – depending on Site structure and complexity – up to 7~10 module css files

If I like to, I use vendor CSS like **twitter.bootstrap.css** or a **reset.css**.

adding 2~4 Fonts and I got a lot of Stylesheet to keep the project organized.

I am not even using preprocessors (yet). And I am just fine doing regular CSS.

But when Chris Coyier mentioned some methods in his “a modern webdesigners workflow”. I became a bit curious and tried them all.
I am also a bit lazy about vendor-prefixes; so I use [PIE](http://css3pie.com/ “PIE”), [prefixfree](http://leaverou.github.com/prefixfree/ “Prefixfree”) and stuff like that.

However – I tried livereload/sofresh/similar to ease the pains of webdesign (hurting my F5 key and other issues)
prefixfree has no effect on @import. And also LiveReload isn’t happy to see @import.
What do you recommend to create a better workflow? squish everything into one CSS file? using fancy preprocessors?

Thank you in advance for all of your opinions, links, advice and other stuff.

[Paulie_D]

> I have up to 15 or 20 Stylesheets per Project.

This seems to be an awful lot. I would have thought 4-5 would be ample for a development site.

[Preface Studios Ltd]

I’d suggest spending a day getting to know SASS. If you’re used to working with 15-20 stylesheets pre project it sounds perfect for you.

Basically when you are developing the site, you still get to keep everything in different stylesheets to keep things clear and improve workflow. You even use @import. The difference is instead of loading another stylesheet and adding an additional HTTP request to your page, SASS compiles all of these imports into one CSS file for you. I’ve found compass.app a fantastic tool for this.

So your dev environment is clear for you, but the speed of the production site is improved tremendously as you have 15-19 less HTTP requests on the page load. The really great thing is you can click Options -> compressed in compass.app and the compiled css file is automatically minified which can have a massive difference on size, especially if you use a lot of comments in your CSS, and why shouldn’t you! :)

[chrisburton]

Even creating comments in your CSS would help organize and separate those sections. Overall, I would have to agree with using SASS/SCSS.

[Kitty Giraudel]

Definitely take a couple of hours to get into Sass and Compass. It seems to perfectly suit your needs.

[Author]

Posts