

Knyle Style Sheets - fbuilesv
http://warpspire.com/posts/kss/

======
jeremymcanally
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.

Adding it to a project will put some more work on designers, but it's nothing
they probably shouldn't be doing already.

------
akdetrick
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.

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.

------
FuzzyDunlop
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.

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.

~~~
proexploit
The issue with doing it this way is that you're making the CSS processor doing
unnecessary work. If you are writing:

    
    
        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>

~~~
StavrosK
Why the hell doesn't the lookup code work left-to-right, like you write CSS?
Is there a good reason, or is it just there to make you eschew best practices
after you learn them?

------
Meai
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.

~~~
kneath
I would love to see someone add that to the library. Personally, all of the
applications I work on are Ruby, so including a gem is the easiest way to
generate a styleguide.

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.

~~~
ryanf
I think he meant that he should be able to customize the output using special
comments, instead of needing to write Ruby.

------
jharding
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.

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.

~~~
pyre
So you want something to be well-documented without having to write any
documentation?

~~~
mark_story
Can't a developer dream? :p

------
superk
I had a similar idea - a living styleguide derived from the css. I envisioned
it in 3 parts:

* 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 ;)

------
dfischer
Yay, I'm glad it's happening.

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).

------
jostmey
I'm upvoting this simply because of the author's statement that "few people
truly comprehend" CCS and that "CSS is complicated". So true.

------
agscala
What makes this any better than SASS or LESS?

~~~
kneath
Sounds like you didn't read my post or the README. Check it out. This is
intended to work _with_ things like SASS & LESS. There's a lot more to CSS
than buzzwords :)

~~~
agscala
You're right, I did miss that. I saw nested tags and assumed this is another
CSS compiler (or whatever you'd like to call them).

I guess you could say this is like Doxygen for CSS?

~~~
vdm
> Doxygen for CSS

That's my understanding; a good analogy.

------
thedaniel
10 points to Griffindor for the Knylefile.

------
bjornsteffanson
Who names shit after themselves anymore?

