Hacker News new | ask | show | jobs
by Isofarro 4624 days ago
I'm starting to see a pattern here about "presentational CSS class names": considering the superficial presentation layer and not the underlying meaning that links consistent design elements. There's a language to design, and it's a hell of a lot more than "this button should be green".

"They said, "I don't know why this button is blue, but it's supposed to be green". Well it turns out it's blue because it has the class blue on it. Instead of trying to figure out what selector was causing this button to be blue, all I had to do was remove the blue class and add the green class. It took 15 seconds."

There's a whole series of unasked questions going on there:

* Why is the button blue - what led to that conclusion?

* Why is green the right colour?

* What about the other buttons, are they all the right colour? If so, why. If not, why?

* Why does the style guide for the site not specify this properly? (You have a style guide, right? Your CTO and designer did present you with an up-to-date, style guide, right?)

Asking these questions leads you to the semantic understanding of why buttons are supposed to exhibit specific characteristics. It's the WHY that's important, not the WHAT.

CSS excels when there's a requirement for consistency in design, and there's a style guide. When your requirements are a superficial "this button must be green" and you don't stop to ask why, then you've already sacrificed the semantic aspects of the documents you are supposed to be vocal about.

Also, how difficult is it to find what stylerule is causing the button to be blue. Right click on the button, click "Inspect this element in Firebug", in the CSS Inspector find the CSS rule that specifies the colour as blue. Look at the CSS selector itself - does it describe the semantic reason why the presentation is coloured blue? With that understanding of the semantic basis of the button being blue, you have an answer WHY the button is blue.

So now you need to understand why the button is supposed to be green. Get that explained to you, and now you have a good idea of the semantics you need to express, or reuse, a CSS rule that will cause the button to be rendered in Green.

This is where semantic class names win hands down, it tells you the WHY of styles. Without the WHY you don't have a basis for explaining why the button is blue, and no clear inkling of why now it should be green. And absolutely no idea which other buttons on the site are the wrong colour.

And that's about as far away as you can be from a consistent style guide, and presentational accuracy. If everything is ad-hoc, then nothing is consistent.