I really love working with organized css files (using the 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, 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.
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! :)
Having just recently jumped into SASS / Compass myself, just do it. You get a much more robust @import due to compiling, mixins to keep you from flubbing up vendor prefixed nonsense, and nesting. Holy cow, the nesting! cue choir of angels + trumpets
Lastly, I'm not sure what platform you work on, but LiveReload for Windows is still hit or miss. Considering it's still in alpha it shouldn't come as a surprise. When it works, it is amazing though.
I really love working with organized css files (using the 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, 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.
This seems to be an awful lot. I would have thought 4-5 would be ample for a development site.
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! :)
Even creating comments in your CSS would help organize and separate those sections. Overall, I would have to agree with using SASS/SCSS.
Having just recently jumped into SASS / Compass myself, just do it. You get a much more robust @import due to compiling, mixins to keep you from flubbing up vendor prefixed nonsense, and nesting. Holy cow, the nesting! cue choir of angels + trumpets
Lastly, I'm not sure what platform you work on, but LiveReload for Windows is still hit or miss. Considering it's still in alpha it shouldn't come as a surprise. When it works, it is amazing though.
Definitely take a couple of hours to get into Sass and Compass. It seems to perfectly suit your needs.