The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.


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

    Use 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 which is fairly close to CSS syntax, LESS which is arguably less powerful than Sass, but I’ve never looked into it much, or 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed