Simplify CSS code
How can i simplify this code?
#user_panel .subscribe,
#user_panel .faves,
#user_panel .tags,
#user_panel .title,
#user_panel .calendar a,
#user_panel .item .content
{
color:#fc0;
}
I don`t want to writ开发者_如何学JAVAe #user_panel all time. Any ways?
How about LESS (less CSS)? Makes your life so much easier!
#user_panel {
.subscribe, .faves, .tags, .title, .calendar a, .item .content {
color:#fc0;
}
}
EDIT: Accoding to a comment, LESS is only useful if you use Ruby. This is totally wrong. LESS is written in Ruby (do not confuse with only compatible with) and comes with a command-line tool less2css
to convert your *.less
files to *.css
files.
I'm going to go with the most common answer, since you haven't given me a reason not to :-)
#user_panel
{
color:#fc0;
}
The other alternative is to add an extra class on every element, and then reference multiple classes when you need it, e.g:
.highlight
{
color:#fc0;
}
<div id="user_panel">
<span class="subscribe highlight"></span>
<span class="tags highlight"></span>
</div>
You can give each of those elements a second class called .user-panel-control and change the CSS to this:
#user_panel .user-panel-control
{
color:#fc0;
}
The HTML would look like this:
<div id="user_panel">
<span class='subscribe user-panel-control'>This is a user panel control</span>
</div>
Thats about as short as you're going to get. You could rename user_panel but you should try to keep your identifiers descriptive to make maintaining your code easier. The obvious question is, do your selectors even require the #user_panel portion?
Potentially you could do:
#user_panel *{ color: #fc0 }
or do as Jon has below.
精彩评论