CSS Architectureand Sass
CSS is easy… is it ?
Basics
. Selects elements by class
# Selects elements by an ID
> Selects a direct child
~ Selects following siblings
+ Selects direct sibling
Basics
: Pseudo Classes (:hover, :active, … )
:: Content Pseudo Classes ( ::before, ::after )
I really recommend
AtoZcss by Guy Routledge
Attributes
a[data-title]
.itemlist
.item
.items
.checked-item
.itemlist
.item
.items
.checked-item
BAD PRACTICE
It's important to reflect relations in naming.
BEM Pattern
Block - Element - Modifier
.block__element—modifier
.block._element.-modifier
<div class="comment comment--favorite"> <img src="..." alt="" class="comment__user"> <p class="comment__body"> ... </p> </div>
<div class="comment -favorite"> <img src="" alt="" class="_user"> <p class="_body"> ... </p> </div>
IDs can and shall be used, but of watch out: IDs have to be unique to your page so be certain you don't need it again.
Use IDs for marking special Elements. This is useful for JS Events and similar.
If an Element with an ID shares styles with something else… just add the classes as well
#todocontainer .wrapper
#todocontainer .wrapper #todolist
#todocontainer .wrapper #todolist li
#todocontainer .wrapper #todolist li a
#todocontainer .wrapper #todolist li a .icon
#todocontainer .wrapper #todolist li a .icon
BAD PRACTICE
Selectors are processed right to left
&
are matched to the DOM tree
Groundrules
• Don't nest deeper than 3 Levels
• Don't nest IDs
• Use classes whenever possible
• Use Pseudo Selectors for complex issues
Media Queries
VII
MediaQueries help you to set special conditions in which CSS Values are valid and processed.
@media (max-width: 800px) { …}
@media only screen and (max-width: 800px) { …}
@media handheld, screen and (max-width: 800px) { …}
Create HTML and CSS for a TODO Page and put it in your git Repository.
(Form, Todos, Unchecked and Checked)
http://codepen.io/Codebryo/pen/qAjIv