When building a relatively large website, the CSS structure ought to be properly scoped and organized right from the begininning. If no CSS framework is used then everything can be lumped together into a massive stylesheet, but this will very quickly get out of order and can become a huge maintenance liability.
For the past few years, I’ve broken my stylesheets into various files including: base.css, layout.css, fonts.css, elements.css, but very easily the style definitions can jump between files and this approach needs to be more strict. I haven’t used a framework since I’m not a fan of preset columns and pre-defined elements in my CSS code.
What approaches, patterns or tips can you guys suggest for keeping things organized? What kinds of naming conventions, reusability practices and patterns are useful? Is this something that a framework should be used for?
I used to love LESS, but now I’m a big fan of Stylus because I think it makes even cleaner code than LESS/SASS/CSS — no semicolons, colons, or brackets.
Because Stylus (and LESS and SASS) allow you to define variables and templates and functions, I have the following files, which should be in this order:
border-radius, transitions, and clearfixThese are all concatenated and compiled to CSS using a simple build script.
You can see what these look like; I made a GitHub repo for this stuff.