Using CSS selector specifity over selector ID's? -
in class teached avoid creating id's in html can use them identify element in css file. instead must use selector specifity as possible.
take example simple html:
<body> <div> <div> <div> div want style. </div> </div> </div> </body> is better use this:
body > div > div > div{ color: blue; } or give element id (let's take 'middle') , use this:
#middle{ color: blue; } what differences (if @ all) performance , usability wise?
the difference in speed between ids , classes in modern browsers negligible in real world situations not issue. therefore current main-line thinking use classes clarity , specifity needed. way avoid specifity wars , balances maintainability code purity.
<body> <div> <div class="more-specific-if-needed"> <div class="middle"> div want style. </div> </div> </div> </body> .make-more-specific-if-needed .middle { /* cool styles */ } or use chained selectors gain specifity. split styles in separate structure based build styles , appearance based theme styles.
<body> <div> <div> <div class="semantic-role theme"> div want style. </div> </div> </div> </body> .semantic-role.theme { /* cool styles */ } for further reading:
Comments
Post a Comment