开发者

Is avoiding duplicate declarations considered good practice in this case?

Is it recommended to combine equal declarations in CSS in order to reduce the filesize and avoiding duplications?

For Example:

#topbar,#searchbox.focus,#usermenu li:hover a,#cart-flyout-table tbody td,.btn_remove开发者_Go百科:hover,#heading-warenkorb a:hover,.button:hover span,.input-text:focus,#pages li a:hover,select:focus,.picture-overview li:hover,#category-sub li a:hover {background-color:#e3eed3}

Is it recommended to do this for some other Properties which are used very often like float,text-align or padding for example?

The Code would getting harder to read and edit but if this will be done only for the most common properties I would accept it. What's about the performance at the rendering? Would it make my website faster or slower?


The answer is: varies.

In general, I would only recommend on doing that when the elements in question are similar in content or in area. I'll explain.

let's say you have a sidebar, and that sidebar has several headlines in it, which you wish to have similar stylings. That's perfectly acceptable to use aside h1, aside h2, aside h3 { font-weight: normal; color: blue; }.

However, to use it the way you described, for a 100 different elements on different parts of the page, then I won't recommend it.


I would avoid the type of CSS styling you mentioned.

It makes your stylesheets much harder to read and update.

Instead, I would group styles according to sections of the page

nav, header, content, etc.

or by actions

form, call to actions, etc.

or a combo of both.

If you see some duplication within those categories, then combining would be fine.

Otherwise, for example, if you want to update one a, you may need to look in four or more different places (for link, active, visited, and hover).


i can't see any problem in combining declaration.

Yet, if you want to apply the same style to your whole page, you'd better considering calling body { } or * { }.

Details to choose between these two are described here: difference between body and * in css


You may also consider using classes or css inheritance to avoid so many combination

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜