Which CSS structure do you prefer, single-file or multi-file, and why?
I’ve been thinking a lot lately about the benefits of both, specifically related to the ‘OOCSS’ approach to CSS development and with tools like Sass. This has all been discussed before, but with these new tools for CSS development, I think it’s worth another discussion.
Single file CSS gives you:
- The ability to easily see the cascade and related styles
- See the available styles to avoid duplication and redundancy as more people add to it over time
- A more easily editable stylesheet. There’s no need to flick between multiple open files and decide which style came first
The downsides of single-file CSS might be:
- No re-usable components. (But do we really RE-USE that many CSS components?)
- The single file becomes unruly over time we hundreds and hundreds of lines
- Now that we’re being responsive with our designs, the media queries can start to add up and add a butt load of extra styles to our files.
With the modular nature of multiple files we get:
- The ability to re-use code across multiple stylesheets, be it different themes, newer versions of the site design, or different sites entirely.
- We break up our styles into the content, container, structure and style much more clearly.
- Perhaps it’s easier to find certain styles when you know the structure of the files
The downsides:
- Splitting into multiple files often means we duplicate styles and structure. Eg. Trying to get all of your type into the type.css.
- Added time spent thinking about where styles should go.
- The total number of files can get very, very large making it semantically valuable, but a nightmare to maintain, as all of the related styles are scattered.
Your thoughts?
