Grow your CSS skills. Land your dream job.

The limits of @import and CSS file organizing rage.

  • # February 15, 2013 at 9:37 am

    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.

    # February 15, 2013 at 9:50 am

    > 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.

    # February 15, 2013 at 12:08 pm

    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! :)

    # February 15, 2013 at 12:36 pm

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

    # February 15, 2013 at 12:46 pm

    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.

    # February 15, 2013 at 12:48 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".