3

How do you prevent CSS stylesheets (or preprocessed LESS or SASS...) from becoming an incomprehensible mess, where it's impossible to predict anymore what styles will affect each elements and you have to do all further tweaks to you CSS based design by painstaking and endless trial and error?

Context: every time I start working on a website, I start with a clean and well organizes set of stylesheets, a framework (usually Bootstrap), then a layout stylesheet, a typography one, for some sites a color scheme stylesheet, and then a general "looks" one where styles are grouped by regions and subregions and so on. And it's all nice and clean until by slowly adding stuff, things reach a "breaking point": I can no longer "run in my head" the style rules, the selector have become so complicated that I cannot easily anticipate what elements a new rule will apply to, so I start breaking the hierarchy and add a "tweaks1.css" tweaks layer, then a "tweaks2.css" and then all it's downhill, the styling has become utterly incomprehensible!

...and the same thing happens whether I use LESS or SASS too. CSS's cascading nature always gets the best of me. So... is there any way to force CSS into submission? are there any "design patterns" here?

Note: I'm a programmer, I have experience in more than one paradigm and programming language, and I have no problem wrangling large codebases, but when I get to frontend work, somehow the "cascading rules" logic of CSS simply breaks my mind at a point... I used to get the same "incomprehensibility" problem with Javascript spaghetti, but for code there are patterns and best-practices and I find ways to refactor things into submission...

NeuronQ
  • 7,527
  • 9
  • 42
  • 60
  • about sass, maybe http://www.thesassway.com/ could be useful as a starting point – Fabrizio Calderan Apr 11 '13 at 16:36
  • 2
    Take a look at smacss (http://smacss.com/). – Lowkase Apr 11 '13 at 16:36
  • 1
    As well as the above, have a google for OOCSS – robertc Apr 11 '13 at 16:51
  • 2
    I tend to try and rely as little as possible on the cascade of styles, and rather try to do precise specificity (but not long, verbose selector strings like LESS and SASS can easily produce through nesting). You might find [this discussion](http://stackoverflow.com/questions/11537260/less-css-abusing-the-operator-when-nesting/11544805#11544805) useful for thought, which considers organizing CSS in LESS by the actual end targeted element. – ScottS Apr 11 '13 at 17:01
  • You might wanna have a look at an example of a one-sheet concept, with the declarations being organized group-wise: http://www.gezondezorg.org/x-files/style.css. – Frank Conijn - Support Ukraine Apr 11 '13 at 18:05
  • 1
    Why was this question closed? Questions about design patterns in software are okay, but questions about design pattern in CSS are not? – awendt Apr 12 '13 at 09:54

1 Answers1

1

This is always a tricky part in CSS. The best way when writing is to comment and visually organize your CSS. For example, mine are always split into sections like page basic(define fonts, backgrounds, etc) basic text formatting (p, h1-h6, i, b), links and menus(a, a:hover,nav), tables, formatting (div, section), forms/input, and transitions/effects.

In the testing stage, I use firebug in Firefox to show me what CSS properties are being applied at the element's level, what is inherited, and what would be inherited but has been overwritten.

mikedugan
  • 2,393
  • 3
  • 19
  • 24