Stop using 'background-color' in your CSS | Hacker News Reader

Stop using 'background-color' in your CSS

welcomebrand.co.uk

9 pointsramanujam9 comments

Who cares? Why is this important? Because I can avoid typing '-color'?

I understand that if I have multiple definitions, I can collapse them -- but if that's the point, the title of the post shouldn't be "stop using background-color".

I really struggle to take any kind of web dev best practice advice from a site that flicked back and forth between font faces while their custom fonts streamed in.

Anyway, as people have mentioned already this is completely off the mark. The whole principle how CSS long/shorthand works is so you use the right accessor when it suits.

#item { background: #fff url(bg.gif) no-repeat top left; }

is anyone really supposed to believe that cascading to: #item.alert { background: #ff0000 url(bg.gif) no-repeat top left; }

is more sensible than just #item.alert { background-color: #ff0000; }

background-color is just one of those ones that I see all the time and always remove from code I use in plugins because I’m a little OCD like that

oh.

He removes it from code in plugins he uses?

Meaning that if he upgrades, he either merges the changes, or does it all over again?

That's not OCD. That's a giant waste of time. Writing a script to do it automatically would have been less waste (a CSS minifier? surely that must already exist).

Commenting meticulously, streamlining indentation, writing commit logs consisting of full sentences, that's OCD (the good kind). "Fixing" perfectly fine libraries is stupid.

Indeed, my "oh" at the end was a little snide and was shorthand for "this entire blog post is worthless and it's basis is that you tell people to change how they code CSS purely because you think they should, with no technical reason whatsoever", but I too was blown away that you would remove things from working code because you feel like it... even worse, it obviously isn't his code. At least respect other people coding styles even if they aren't yours (as long as they are right).

Plain old {background:#fff;} is even shorter than {background-color:#fff}, too.

The only reason to use the verbose declarations is in jQuery where a specific part of an element attribute is updated, and resetting everything else is not wanted. I.E. {background:#ddd url(somefile.png) no-repeat} => {background:#fff}

In the above case, the image background would be dropped.

Read the comment by Drew McLellan.

This. They've rather missed the point of the cascade; perhaps he only writes very simple CSS?

I've always preferred being a little more verbose, if only to avoid hidden side effects and improve readability. You can always compress later if it really bothers you.

Quote: The shorthand properties are for setting multiple related properties at once. It’s not the case that any value you don’t specify when using a shorthand property does it get set – it gets set to a default value.

http://www.welcomebrand.co.uk/blog/please-stop-using-backgro...

Thanks. Useful tidbit for me to remember.

Reply on news.ycombinator.com