Knyle Style Sheets(warpspire.com)

267 pointsby fbuilesv15 anni fa26 comments

http://warpspire.com/posts/kss/

12 comments

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.

akdetrick15 anni fa

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.

HnNoPassMailer15 anni fa

FuzzyDunlop15 anni fa

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 { ... }

    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.

mark_story15 anni fa

One problem with the approach you've pointed out is very very specific selectors. This really couples the structure of your HTML to how it displays. This works well for a while, but on bigger projects it has fallen down for me every time.

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.

proexploit15 anni fa

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

StavrosK15 anni fa

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?

mundizzle15 anni fa

i would avoid structuring your CSS like that. http://smacss.com and https://github.com/stubbornella/oocss/wiki will help you

Meai15 anni fa

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.

kneath15 anni fa

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.

ryanf15 anni fa

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

killnine15 anni fa

Exactly what I would have liked to write if I could have found the wording...

I have been using twitters bootstrap on everything I write since I came across it. This seems very similar

jharding15 anni fa

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.

pyre15 anni fa

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

mark_story15 anni fa

Can't a developer dream? :p

superk15 anni fa

I thought about it like you describe - but then why even bother with the generation, why not be able to browse your stylesheets and have them transformed into styleguides realtime: https://github.com/aglemann/instant-styleguide

superk15 anni fa

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

dfischer15 anni fa

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

[deleted]15 anni fa

jostmey15 anni fa

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

agscala15 anni fa

What makes this any better than SASS or LESS?

kneath15 anni fa

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

agscala15 anni fa

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?

vdm15 anni fa

> Doxygen for CSS

That's my understanding; a good analogy.

chbrown15 anni fa

I was also confused at first, and thought that this guy just re-invented LESS.

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

kneath15 anni fa

The comment syntax works great with regular CSS as well. It's a style of writing CSS. SASS/SCSS/LESS are methods for generating CSS.

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.

thedaniel15 anni fa

10 points to Griffindor for the Knylefile.

bjornsteffanson15 anni fa

Who names shit after themselves anymore?