Move to OOCSS methodology #16
Description
As mentioned in #8, moving OOCSS would make CSS more flexible and cause less issues in the future.
Background
A brief explanation of OOCSS is it defines groups of CSS selectors/rules based on visual patterns. A classic example is the media object, an image element on the left with content on the right:
We can define a set of CSS rules to fit this. If we go the content semantic route, we would get something like:
.status-image {
float: left;
}
.status-content {
/* Nothing goes here */
}Then, we continue working on our project and see a similar pattern but can't reuse it because the selector is content semantic:
.status-image,
.reply-image {
float: left;
}
.status-content,
.reply-content {
/* Nothing goes here */
}When we encounter the same visual pattern, it needs to add to the selectors. What if a selector has a lot of overrides? This turns into unnecessary maintenance and code bloat.
Instead, we can make the classes visually semantic:
<div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img">
<img src="http://stubbornella.com/profile_image.jpg" alt="me" />
</a>
<div class="bd">
@Stubbornella 14 minutes ago
</div>
</div>.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}This affords us a few things:
- No excess maintenance to gain new styles
- When styles do change, we can turn them off on a per element basis without fear of breaking styles across pages
All images and some code referenced here came from:
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
Suggestions for nodebugme
Rename .login-btn to .btn--primary or similar. This would allow similarly styled buttons to use the same class.
Optionally remove margin from .btn--primary as it might cause issues in other locations. Ideally, this would be scoped to what the page needs (e.g. leave a .login-btn class which only does the margin).
This is taken from another OOCSS concept which is to separate chrome from layout (e.g.
colorandmargin).
Remove width from input[type=text], that will definitely have issues in the future. Replace it with width helper classes (e.g. one-whole (100%), one-third (33.333%)).
Relocate all HTML selectors to the top of the CSS file. Since CSS is cascading the heavier overrides should be located towards the bottom of the file to make it easier for programmers to keep track of.
Relocate overrides for ul and ul > li into another visual pattern. At some point, there might be a need for bulleted lists and having a selector that destroys the default behavior will likely cause more maintenance than was necessary (e.g. need to create new rule to style these lists or revert the rule).
Don't use 2 classes to select modified buttons (e.g. button.danger). The cascade is already performing the override and using 2 classes will make it harder to override later on in the cascade. Instead, consider adopting a naming convention like BEM which indicates a modifier but doesn't require more classes:
.button {
/* Normal button styles */
}
.button--danger {
color: #e84f42;
}