Knyle Style Sheets
warpspire.com
warpspire.com
Adding it to a project will put some more work on designers, but it's nothing they probably shouldn't be doing already.
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).
Automated documentation for CSS is a fantastic idea, and this looks well executed.
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.
body > header { ... }
body > header > h1 { ... }
body > header > h1 + small { ... }
Or div#sidebar > form#login-form input,
div#sidebar > form#login-form select
{ ... }
Why is there nothing (without Less/Sass/some other package) like div#sidebar > form#login-form (
input, select { ... }
label { ... }
)
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.I've been finding that keeping my selectors no more than 3 deep is a good balance. It also forces me to abstract container styles into re-usable bits, and name things properly instead of exploiting the structure of the HTML.
div#sidebar > form#login-form input
then you are actually searching for input, then #login-form, then form, then #sidebar, then div. It adds up on a really big site. If you had just written #login-form input
you get the same selection without the additional processing. Even if you want to track the full "stack", don't use those extra tag qualifiers. #sidebar > #login-form input
is much better than what you've got.Good source: http://code.google.com/speed/page-speed/docs/rendering.html
I have been using twitters bootstrap on everything I write since I came across it. This seems very similar
I would suggest though not to customize the comment syntax. That's the entire value of KSS — the ruby library is just a means to access the comment syntax.
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.
* A way to transform css into html (https://github.com/aglemann/css2html)
* A simple webserver that would detect a stylesheet, run it through the transformer and serve up the html styleguide (https://github.com/aglemann/instant-styleguide)
* A methodology for architecting your css for use with the two technologies (coming soon?)
All the pieces work, I need to do a blog post about it ;)
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.
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.
This is a step in the right direction.
I was supposed to do a presentation on this very topic but then a hurricane got in the way (magma rails).
I guess you could say this is like Doxygen for CSS?
That's my understanding; a good analogy.
I think the source of confusion is that he calls his project "Knyle Style Sheets," whereas a more accurate name would be "Knyle markup for Preprocessed Style Sheets" (or Kml*SS).
I think that there's a pretty big short-sighted buzzword obsessed culture associated with CSS. We need to realize that "CSS" is a lot like "Scripting Language". There are many styles of writing scripting languages, many scripting languages, and many implementations of scripting languages. It doesn't take more than 15 seconds to read one sentence and understand what it means. Let's look past the name.