CSS is almost too flexible to be able to stick to some sort of convention. I find myself trying to code in one style, and then doing it differently or disliking it on a different project.<p>I try to make some of it self-documenting, so will only class out a particular element then, through CSS, enforce a strict order of child elements by using the direct descendant/sibling selectors, etc. I'll usually include the element hierarchy in the definition where necessary. But then I don't like it because there's so much repetition.<p><pre><code> body > header { ... }
body > header > h1 { ... }
body > header > h1 + small { ... }
</code></pre>
Or<p><pre><code> div#sidebar > form#login-form input,
div#sidebar > form#login-form select
{ ... }
</code></pre>
Why is there nothing (without Less/Sass/some other package) like<p><pre><code> div#sidebar > form#login-form (
input, select { ... }
label { ... }
)
</code></pre>
That KSS attempts to better document CSS is great, and I'll certainly look into that more. But in some ways I think the difficulty comes from CSS itself being pretty flat when a DOM tree is anything but. And for the sake of easy re-use and documentation, sometimes you'd rather not just have a huge list of styled classes and IDs to wade through when you really don't need that many.