2 replies [Last post]
leafface
leafface's picture
Offline
newbie
Hungary
Last seen: 5 years 36 weeks ago
Hungary
Timezone: GMT+1
Joined: 2006-05-15
Posts: 9
Points: 5

Hi,

I have built a user style for Facebook. There are 67 instances of the same code: border-color: #455770 !important. I'm considering putting a single instance of this into * { }, it would chop off 4 kB (about 10%) off the code.

Would this slow down the style loading time considerably?
And which one is worse? Repeating the same styling command 67 times for avoiding usage of *, or using * instead of filtered formatting?

Remark:
The inspector in Chrome looks pretty messed up because of the usage of * (I already use * for setting default text color), that's why I thought the browser might perform a lot of redundant styling because of *.

Thanks for your time.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Using the * selector or the

Using the * selector or the !important attribute is nearly always an indication of poorly structured html and css. Best practice? Don't do either. (On the text color, don't use the * selector. Text color is inherited, so simply declare it and other inherited default property values on the body element.)

Border is not inherited, so you must have 67 separate elements with borders. If all (or most) are on the same page, you may want to look at your graphical eye travel hints. If on different pages, I'd guess your pages are badly structured, or class/id tokens are poorly chosen.

To your original question, as your page is loaded, the browser creates both the html DOM and the CSSDOM. These constructs are matched up to determine rendering. If there is an effective difference in efficiency, I doubt that it makes more than a trivial difference. A well structured html and css will make a hugely positive difference in the cost of debugging and maintenance. The * selector and !important will make a hugely negative difference.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

leafface
leafface's picture
Offline
newbie
Hungary
Last seen: 5 years 36 weeks ago
Hungary
Timezone: GMT+1
Joined: 2006-05-15
Posts: 9
Points: 5

Thanks for the exhaustive

Thanks for the exhaustive answer.
But you didn't take it into account that it's a user style* for Facebook. (*A css applied locally by the browser to override some part of css of the web page, usually using the addon 'Stylish'.)

The web page's original css has priority over locally applied user styles, so the !important attribute must be used in user styles to override a definition in the original css. (In my web development jobs I've never used !important for building css.)

As for the * selector. The 67 instances of the same border formatting is because of bad structure, but if this is how Facebook is structured, I can't do anything about it. Since a user style is all about re-defining existing definitions, and not about structuring according to my own will, there can be cases when using * can benefit the process. (This is why I used * for coloring most of the text. Correcting the * selector's disadvantageous effect – that it ruins definition inheritances – took 10-20 times less work than re-coloring every single class, whose color is not inherited, would have took.) So if you're saying that using * doesn't affect performance negatively, I prefer using * for that border coloring too.

Thanks,
Laci