Even if the slides are presented without me talking besides them they hopefully provide some value. You will find a brief introduction to the BEM Pattern and some points on what to keep in mind when writing CSS. Also you will find a short intro on SASS aimed for beginners.

1. CSS Architecture
and Sass

2. know CSS
I

3. CSS is easy… is it ?

4. Basics
. Selects elements by class
# Selects elements by an ID
> Selects a direct child
~ Selects following siblings
+ Selects direct sibling

5. Basics
: Pseudo Classes (:hover, :active, … )
:: Content Pseudo Classes ( ::before, ::after )

6. I really recommend
AtoZcss by Guy Routledge

7. Selectors
II

8. Elements
a

9. IDs
#bloop

10. Classes
.bloop

11. Attributes
a[data-title]

12. Naming
III

13. .itemlist
.item
.items
.checked-item

14. .itemlist
.item
.items
.checked-item
BAD PRACTICE

15. It's important to reflect relations in naming.

16. BEM Pattern
Block - Element - Modifier

17. .block

18. .block__element

19. .block__element—modifier

20. — or —

21. .block._element.-modifier

22. — example —

23. <div class="comment comment--favorite">
<img src="..." alt="" class="comment__user">
<p class="comment__body">
...
</p>
</div>

24. <div class="comment -favorite">
<img src="" alt="" class="_user">
<p class="_body">
...
</p>
</div>

25. DRY
IV

30. IDs
V

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

32. Use IDs for marking special Elements. This is useful for JS
Events and similar.

33. If an Element with an ID shares styles with something
else… just add the classes as well

34. Selectors
VI

35. #todocontainer

36. #todocontainer .wrapper

37. #todocontainer .wrapper #todolist

38. #todocontainer .wrapper #todolist li

39. #todocontainer .wrapper #todolist li a

40. #todocontainer .wrapper #todolist li a .icon

41. #todocontainer .wrapper #todolist li a .icon
BAD PRACTICE

42. Selectors are processed right to left
&
are matched to the DOM tree

43. Groundrules
• Don't nest deeper than 3 Levels
• Don't nest IDs
• Use classes whenever possible
• Use Pseudo Selectors for complex issues

44. Media Queries
VII

45. MediaQueries help you to set special conditions in which
CSS Values are valid and processed.

46. @media (max-width: 800px) {
…
}

47. @media only screen and (max-width: 800px) {
…
}

48. @media handheld, screen and (max-width: 800px) {
…
}

49. TODO
VIII

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