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 write #user_panel all time. Any ways?
-
3Use a name that's shorter like #up ?tur1ng– tur1ng2010-02-15 13:39:03 +00:00Commented Feb 15, 2010 at 13:39
Add a comment
|
4 Answers
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.
3 Comments
Paolo
+1 for the link, hadn't heard of that before but have wanted to write something similar for ages.
Marcel Jackwerth
There is also something called SASS sass-lang.com (inspired the creators of LESS). Python/Ruby/YAML developers love it, but I deem LESS easier to learn if you come from CSS - it's an evolution instead of a revolution.
Marcel Jackwerth
@graphicdevine: I would not say that it's only useful if you use Ruby. There are LESS-plugins for .NET already. At its core it is just a command-line tool (which is written in Ruby) and can be used for any purpose (even static websites).
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>
1 Comment
Ikke
Maybe only if the item has certain classes this style needs to be applied.
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>
Comments
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.
Comments
