Jul 26

Examples: BAD CSS #CSS #Root #By Sayed Ahmed 

Case 1: Bad as depends on HTML Structure too much

#main-nav ul li ul li div { }
#content article h1:first-child { }
#sidebar > div > h3 + p { }

Case 2: 
.widget {
  background: yellow;
  border: 1px solid black;
  color: black;
  width: 50%;
}
#sidebar .widget {
  width: 200px;
}
body.homepage .widget {
  background: white;
}

Bad because the CSS classes are not reusable. Modifying Components Based On Who Their Parents Are is not great. 
Widget is being different based on location Software entities (classes, modules, functions, etc.) should be open for 
extension, but closed for modification.


Case 3:
Bad as Overly Generic
<div class="widget">
  <h3 class="title">...</h3>
  <div class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In condimentum justo et est dapibus sit amet euismod ligula ornare.
    Vivamus elementum accumsan dignissim.
    <button class="action">Click Me!</button>
  </div>
</div>

.widget {}
.widget .title {}
.widget .contents {}
.widget .action {}

Case 4: Bad: Making a Rule Do Too Much
.widget {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: red;
  font-size: 1.5em;
  text-transform: uppercase;
}

From: http://sitestree.com/?p=1638
Categories:CSS, Root, By Sayed Ahmed
Tags:
Post Data:2014-11-09 00:53:45

Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada