6. (Object Oriented)
A system to be modeled as a set of objects that can be
controlled and manipulated in a modular manner
< Inheritance, can be extended and reusable >
7. (CSS Specificity)
Every selector has its place in the specificity hierarchy
smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
9. Samples of CSS comment styles
/* ====== media ====== */
/* _header styles */
/*
* — Section Heading —
*/
/**
* High level descriptions or summaries
*/
http://cssguidelin.es/#commenting
10. Semantics in HTML5 and CSS
HTML5 introduced a new elements that can improve semantics of
your code. With this semantic elements and semantic naming in your
CSS classes, they can complement each other.
<nav class=”primary”>
</nav>
<section class=”main”>
</section>
<aside class=”sidebar”>
</aside>
11. How to apply semantics in a global team
Global teams deal with a variety of cultures and linguistics differences
that can make semantics hard to apply.
Guidelines document
Use Interfaces
Delegate a reviewer
12. CSS Resets, which one you use?
“The reset styles given here are intentionally very generic. I don’t
particularly recommend that you just use this in its unaltered state in
your own projects. It should be tweaked, edited, extended, and
otherwise tuned to match your specific reset baseline”.
Eric Meyer
Eric Myer’s Reset
HTML5 Doctor
Your own?
16. Object Oriented CSS Best Practices
Classes instead of IDs for styling
No multi-level descendant class specificity unless needed
Define your design in “Components”
Extend elements with targeted classes rather than parent classes
Mix and Match components
Organize your stylesheet into sections
Consider adding a table of contents
Camel case your class names - naming is oriented around the “object”
23. Tradeoffs
Bloating of the HTML
More CSS rules
Have to update HTML to make changes
Benefits
Maintainable and organized*
Easy to implement, no tools necessary
DRY CSS
Good for big and small projects
27. File Architecture with Plain CSS
index.css - This is what will be linked in the HTML head. It uses
@import to bring the rest of the files into the document
base.css - reset, IDs and Element selectors OK
layout.css
theme.css - optional
module.css - will import other files from the modules folder
Modules folder
-media.css
-text-box.css
31. Space Naming for Classes
modules/cards.css
.card {}
.card--label {}
.card--meta {}
.card--meta {}
.card--copy {}
32. Tradeoffs
Complicated Structure
Requires precompiler *
Bloating HTML with classes
Benefits
Maintainable and organized*
Faster rendering by using OOCSS principles
DRY CSS
Great for big projects with cross-functional teams
35. BEM best practices
Everything is a class
Avoid nesting of any kind
Keep CSS specificity very flat and low
Descriptive names for classes
Avoid element selectors
CSS classes in BEM are called entities
36. (BEM)
BEM goal is to help developers better understand the
relationship between the HTML and CSS in a given project
37. BEM classes relationship
.btn = BLOCK
.btn__price = ELEMENT Is the class that depends on .btn to work
.btn--orange= MODIFIER Extend the .btn class
A representation of a web page structure in terms of blocks, elements,
and modifiers
BEM tree
38. Using BEM naming conventions
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {} or .btn__price--orange
39. HTML with BEM classes
<a class="btn btn--big btn--orange" href="http://google.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>
40. How about JavaScript?
If you are using ID to select DOM element withJavaScript, try to use a
semantic name that describes the behavior.
$("js_btn--fadein").click(function(){ $("#div1").fadeIn();});
jQuery
<button class=”btn__cta btn--orange” id=”js_btn--fadein”>
BUY NOW $9.99</button>
HTML
41. Tradeoffs
Bloating HTML with classes
Ugly, Ugly, Ugly
Long *&^#$ class names
Benefits
Maintainable and organized*
Relationships are defined in the naming conventions
Great for big and small projects with cross-functional teams
