how to DRY up (remove redundancy) from this css class selector declaration?


Tags: css,optimization,dry,redundancy

Problem :

I have:

    .sketch_img_thumb_box .title{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .title{
      opacity: 1;
    }

    .sketch_img_thumb_box .artist{
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .artist{
      opacity: 1;
    }


    .sketch_img_thumb_box .rating_bar {
      opacity: 0.1;
    }
    .sketch_img_thumb_box:hover .rating_bar  {
      opacity: 1;
    }

I took it down to:

  .sketch_img_thumb_box .title, .sketch_img_thumb_box .artist, .sketch_img_thumb_box .rating_bar{
     opacity: 0.1;
 }
  .sketch_img_thumb_box:hover .title, .sketch_img_thumb_box:hover .artist,   .sketch_img_thumb_box:hover .rating_bar{
    opacity: 1;
}

Can we optimize further?



Solution :

write like this

css:

.sketch_img_thumb_box{
         opacity: 0.1;
     }
    .sketch_img_thumb_box:hover{
         opacity: 1;
     }

html:

<div class="sketch_img_thumb_box">
  <div class="title"></div>
  <div class="artist"></div>
  <div class="rating_bar"></div>
</div>

because if you give opacity the parent then children automatically get the opacity.

check the fiddle http://jsfiddle.net/sandeep/axuxT/4/

& If there are others children which you didn't want to give opacity then write this:

.no_bar{width:50px;height:50px;margin:5px;}
.sketch_img_thumb_box > *{opacity:0.1;display:inline-block;}
.sketch_img_thumb_box:hover > *{opacity:1}
.no_bar{background:black;opacity:1}

Check the fiddle http://jsfiddle.net/sandeep/RqP6p/


    CSS Howto..

    How to align radio buttons with labels in one line? [duplicate]

    HTML: How to add an image using CSS as linked style sheet

    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    How to add a background image or theme through CSS?

    How to hide `
  • ` drop down menu in Nav bar in Desktop view?
  • Bootstrap CDN + WP // How to edit '.css’

    How to use PHP to get the value of a star rating widget?

    How to draw a gradient colored trapezoid with css3?

    How to edit css files using php safely?

    How to extend Navigation in CSS

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    Gulp callback - How to tell Gulp to run a task first before another?

    how do i edit my CSS to show following things please [closed]

    How to include css font in Firefox and internet explorer?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How to simplify my CSS stylesheet?

    How to fade gradient, image or texture as background?

    CSS: How to get rid of scroll (except when there's additional content)?

    How do I center text next to a floating image using css?

    How can I fix left menu in bootstrap 3.0? [closed]

    How quora put that image on their home page? [closed]

    How to make a stable two column layout in HTML/CSS

    How to make Block Container with Inline-Block Child in CSS

    How can that view be achieved? Collage / Magazine Products

    How to test CSS selector performance?

    How to configure css flexbox so height of one of the block depends on it content?

    How to create a pure CSS tooltip with HTML content for inline elements

    How to test a web designer on css layouts?