Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I reduce this repetition

How can I reduce this repetition

Problem

I have this CSS but as you can see I am repeating the same thing for different categories...how can I reduce this code?

.dropdown .cars-category{
   float: left;
   margin-left: 1%;

}


.dropdown .trucks-category{
    float: right;
    margin-right: 1%;
}


.dropdown .trucks-category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .trucks-category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .trucks-category > li > a:hover,
.dropdown .trucks-category > li > a:focus,

.dropdown .trucks-category > .active > a,
.dropdown .trucks-category > .active > a:hover,
.dropdown .trucks-category > .active > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}


.dropdown .cars-category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .cars-category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .cars-category > li > a:hover,
.dropdown .cars-category > li > a:focus,

.dropdown .cars-category > .active > a,
.dropdown .cars-category > .active > a:hover,
.dropdown .cars-category > .active > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}
Problem courtesy of: Autolycus

Solution

Opt 1 - Change HTML and then Reduce

Using two classes instead of a hyphenated class is going to reduce it the most. So instead of class="trucks-category" in the html, use class="trucks category" andclass="cars category". Also, some of your last block is unnecessary (assuming the .active is on an li element). Reduces to 7 selectors:

.dropdown .cars.category { /*could eliminate .category if no other .cars under */ 
   float: left;            /*the .dropdown menu, see .trucks for example */
   margin-left: 1%;
}


.dropdown .trucks { /*removed category if not needed to differentiate */
    float: right;
    margin-right: 1%;
}


.dropdown .category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .category > .active > a,
.dropdown .category > li > a:hover, 
.dropdown .category > li > a:focus
/* .dropdown .category > .active > a:hover, UNNEEDED */
/* .dropdown .category > .active > a:focus UNNEEDED */ {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}

Opt 2 - Target the Same Value on the Class Name

Like Option 1, but keeping your hyphenated classes. This is only useful if you do not have other -category classes that are different css and under .dropdown. If not, then this works:

.dropdown .cars-category { 
   float: left;            
   margin-left: 1%;
}


.dropdown .trucks-category {
    float: right;
    margin-right: 1%;
}


.dropdown [class*="-category"] > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown [class*="-category"] > li.last > a {
    border-bottom-width: 0;
}

.dropdown [class*="-category"] > .active > a,
.dropdown [class*="-category"] > li > a:hover, 
.dropdown [class*="-category"] > li > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}

I put option 1 as 1 just because I feel having the separate class names is more intuitive and more flexible.

Solution courtesy of: ScottS

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I reduce this repetition

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×