Treehouse: Grow your CSS skills. Land your dream job.

Modular CSS

  • # August 21, 2011 at 8:11 am

    Hey guys,

    I’ve been thinking about my way of organizing CSS. Is there anyone using some kind of “modular” css? Like header.css or typography.css? Right now I’ve got everything in style.css, which gets confusing from time to time.


    # August 21, 2011 at 8:30 am

    I use a singular stylesheet but separate components in that stylesheet such as typography, base styles, header, content, footer.

    # August 21, 2011 at 8:30 am

    For development purposes it can certainly be useful. I use a reset, a grid system, a type and a styles set. I merge and minimise them before deployment…but I am considering breaking up the styles.css into different sections (for development). Once I have them settled, I can concentrate on the next section.

    I think Chris did an article some time ago about having additional style sheets for individual pages which would contain css relating solely to items on those pages….such as forms.css for a single form page. No need to load it when it isn’t needed.

    # August 21, 2011 at 2:28 pm

    Okay. Yeah I’ve used reset files and grids. But I’m thinking about going all the way and create multiple stylesheets like header.css, main.css, footer.css and so on.

    Do you guys see this as something inconvenient, or something really useful and more “clean”?

    # August 21, 2011 at 2:32 pm

    Definitely no way I would use multiple stylesheets like that. I’d go crazy opening them all up.

    # August 21, 2011 at 3:38 pm

    Aah okey. It was just a thought, guess it’s to much work editing them :)

    # August 21, 2011 at 7:03 pm

    +1 to what @TheDoc said. It’s much quicker using CTRL+F to find the section I need than to have to tab between documents.

    # August 22, 2011 at 4:41 am

    @AntonNiklasson: you could also consider creating “sections” in your CSS file by using comment lines to group styles. See an example and explanation in this article:

    # August 22, 2011 at 6:50 am

    You could also use something like Sublime Text 2. It has a little map of the document on the right which could help you keep track of where you are. I pretty much have my fingers on CTRL + F, like @joshuanhibbert said.

    # August 22, 2011 at 8:54 am

    @jamy_za Sublime Text 2 is amazing. I have just started using it and am completely sold on it.

    # August 23, 2011 at 9:40 am

    Yeah, I’m currently using comments to create sections. Just wanted to know how you guys do it.

    It would be kinda fun to hear about some alternative way of writing CSS though, is there anyone out there using some other technique?

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

You must be logged in to reply to this topic.