Grow your CSS skills. Land your dream job.

How does one handle css for a big project?

  • # May 2, 2013 at 9:54 pm

    So far I have been following the tree structure according to the flow of my HTML but I don’t know if it’s the smartest way to handle the mess. Any thoughts?

    # May 3, 2013 at 2:18 am

    Organize.

    Create “modules” of bits and pieces of styles that logically work together, like “typography”, “forms”, “buttons”.

    Use [CSSCSS](http://zmoazeni.github.io/csscss/) to see if there’s any overlap you may want to consider breaking out.

    Comment, comment, comment, comment. Good code explains itself, but having some commentary such as “headings on product pages” or whatnot can be very useful when you’re trying to remember where you’re supposed to be looking.

    Don’t be afraid to work in different files, but make sure you get them all together into one file before you go live. I suggest that sometime when you have spare time look into some kind of pre-processor, it at least helps me organize my thoughts. Of those, there’s [Sass](http://sass-lang.com/) which is fairly close to CSS syntax, [LESS](http://lesscss.org/) which is arguably less powerful than Sass, but I’ve never looked into it much, or [Stylus](http://learnboost.github.io/stylus/) which seems interesting but is too little CSS syntax for my taste.

    # May 3, 2013 at 7:38 am

    Agreed complete with Melindrea here.

    Break your stylesheet into logical pieces. Experiment a bit here to find what works for you (by device size, by things like “typography”, “layout”, etc.). I like to put a large comment break between each section, that way it jumps out at me when I’m scrolling down the page.

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

You must be logged in to reply to this topic.

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