Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I have four core files:

    reset.css    - I use eric meyer's
    elements.css - Global defaults for things like body,
                   h1, h2, h3, p, a, input, strong. All
                   or almost all selectors in here are
                   just tag names.
    layout.css   - Just sets up the global layout with
                   containers: e.g. header, footer, left
                   column, right column.
    blocks.css   - Reusable chunks.
In addition to that, I use a separate file for each "page type". For example, 'article.css', 'index.css', stuff like that. Some larger sites merit additional files like splitting off 'forms.css', 'tabular.css', etc.

All files get concatenated and minified before serving, obviously.



That makes a lot of CSS files. Google chrome network optimization would tell you to reduce the amount of includes to speed up your site. That said that is debatable since it would be quickly cached.


As he says at the end, one would obviously not just stick a big stack of `link`s in the page. Some kind of build system/asset packager would be necessary and desired (so you aren't forced to write a huge monolithic css file that no one but your past-self can navigate :)).


What would you put in chunks.css? Could you maybe provide a brief example?


I can't speak for the OP, but as I use a similar system I can venture a guess that some of the following might be worthy of chunk status...

For a website: callouts, user quote styles, tables styles [zebra stripes, etc.], feature lists, intro paragraph styles, Flash/message styles, common control styles, etc.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: