I love this; I've needed this on nearly every project I've ever worked on for various reasons. Either someone doesn't remember what a class looks like or doesn't apply it properly or the designer named things ambiguously on accident. You end up with some styles applied properly and others ignorantly thrown around because no one really understands how the CSS is laid out besides the designer.<p>Adding it to a project will put some more work on designers, but it's nothing they probably shouldn't be doing already.
Duplication is probably the easiest mistake to make with CSS, and using authoring languages like LESS and SASS won't necessarily help. Duplication not only causes bloat, but it can lead to specificity wars and poorly performing selectors. Worse yet, it becomes more difficult to trust the code already in place, and easier to write your own styles to perform tasks that some other code already handles.<p>This is the death spiral of CSS, and it's refreshing to see someone take on this problem directly (aside from teaching a methodology for writing CSS).<p>Automated documentation for CSS is a fantastic idea, and this looks well executed.
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.
This seems complicated, it would be cool to have something like this for non-ruby guys. If I understand correctly, I need to write a ruby parser myself in order to use this. Much easier would be a binary which just takes all files in a directory by default, and creates an html with a default template. If I want to customize it, let me customize it by comment syntax, not ruby code.
Great idea. My one issue with it is that it seems kind of difficult to use. Ideally, using this would consist of passing the files I wanted a style guide generated for to KSS and it would take care of the rest.<p>I'm definitely going to keep my eye on this project over the next few weeks. Something like this is badly needed and I can't wait to see where KSS goes.
I had a similar idea - a living styleguide derived from the css. I envisioned it in 3 parts:<p>* A way to transform css into html (<a href="https://github.com/aglemann/css2html" rel="nofollow">https://github.com/aglemann/css2html</a>)<p>* A simple webserver that would detect a stylesheet, run it through the transformer and serve up the html styleguide (<a href="https://github.com/aglemann/instant-styleguide" rel="nofollow">https://github.com/aglemann/instant-styleguide</a>)<p>* A methodology for architecting your css for use with the two technologies (coming soon?)<p>All the pieces work, I need to do a blog post about it ;)
Yay, I'm glad it's happening.<p>I've been saying this for a while now (yes, I should be doing more than saying)... CSS needs a modern agreed-upon community standard for implementation.<p>This is really important at the front-end development layer when you're doing CSS inside of an application. There's too much variance in style between projects and frameworks. We need to commit to a general guideline, especially one that incentivizes good standards.<p>This is a step in the right direction.<p>I was supposed to do a presentation on this very topic but then a hurricane got in the way (magma rails).