CSS Architectureand Sass

know CSS

I

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

Selectors

II

Elements

a

IDs

#bloop

Classes

.bloop

Attributes

a[data-title]

Naming

III

.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

.block__element

.block__element—modifier

— or —

.block._element.-modifier

— example —

<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>

DRY

IV

IDs

V

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

Selectors

VI

#todocontainer

#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) { …}

TODO

VIII

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