Hacker News Reader

Comment by isleyaardvark | Hacker News Reader

You should declare your sass variable 'blue', because it's easier to work with than #3bbfce. if you want to change it to green, you would change it in the declaration from border-color = !blue to border-color = !green. (Or add an intermediate variable like !primary_color = !blue.)

View on HN

If I go through replacing all of the !blue with !green in my files, I might as well replace #0000ff with #00ff00.

Your variable names represent a value, not a color. You should ask yourself what the function of that value is before naming the variable.

But that's just me. CSS is not something you can let slide. Adding templates, widgets, and pages on a mass scale (20+ templates, 30+ widgets, 500+ pages), your CSS deficiencies will show quickly.

I should've said "You should add an intermediate variable" instead of "Or add an intermediate variable". If you were to name a variable !blue, it should be treated like a global variable, and only used in matters of say, the color palette of a site, and not the particular color used in sidebar.

Agreed. I do the exact same thing. First define a palette and with variable names that describe the color (eg, !mauve= #E0B0FF), then assign those to descriptive variable names (eg, !accent_color= !mauve). That way it's immediately clear which colors are being used while also avoiding the need to replace variable names throughout the partials.

Can the same not be accomplished with a comment?

Sure, if you want to leave the same comment in every place you assign a particular hex value to one of the descriptive variables and don't mind changing each of those duplicated hex values if you ever need to tweak the color. Personally, I don't see the benefit of using comments when using variables is already self-documenting and further avoids possible duplication of hex values.

I think you misunderstood me, which is understandable.. I was unclear. The comment question wasn't meant to be combative. I agree and can see the benefit/use.

Thanks for being patient with me while I explore alternative solutions.

I think mtoledo's point is that variable names should have context, and not be mere appropriations of their content. For example, "theme_color" would be better than "blue" because you could use it in context among lots of different CSS definitions, and if your theme color changes, it's a single change, as opposed to changing all the "blue"s to "green"s or whatever.

I understood that part, that's why I gave the example of !primary_color. The point I'm making is that naming a variable after a color isn't necessarily a bad thing and can be a useful abstraction, and there's no reason you can't do both. I can recognize some common color hex codes, but I find it easier to work with more human readable names. If I'm looking at a site and I want to make the orange color slightly darker, will I remember that it's !color3? Or is it easier to look through for !light_orange?

I follow you isleyaardvark. I think one of the challenges of having a discussion about CSS is scope/setting. CSS is used on every different type project. If you're doing client work and building 5 page mini site (I'm not suggesting anything), your thoughts on CSS are based on a completely different use than the developer that maintains 500+ pages.

We both know CSS. But we use them entirely differently.

On a site with 500+ pages, by the time you've implemented all of your !blue to !green, or !light_orange to !dark_orange throughout your stylesheets, management will be considering another redesign.

For me, it's easier to inspect the element in Firebug and copy/search the hex code, since I get the guarantee that I'm not changing an unrelated poorly named variable.

I find that for simpler sites, naming colors after their closest tone works well, but when I have a dozen shades of the same color, I start to run out of names very quickly (e.g. it's not unusual for me for a single page to have different background boxes, zebra striped tables, subheaders, selected/hover states and an array of other details on top of the overall layout)

That's why I think names like "color3" are bad. If the orange is on headings, look for headings. If the orange is the page background, look for what represents that. I don't see a compelling reason to actually use the color name in the variable name since things should be easier to look up if the context is taken into account.

Reply on news.ycombinator.com