Talk about css architecture. Code smells. Best practices. Team communication.

1. CSS Architecture
Doing it right

2. @gabrielgpoca

5. To whom is this?

6. • Doing it wrong.
• Doing it right.
• Communication.

7. Doing it wrong

8. Code Smells
• Undoing styles.
• Magic numbers.
• Qualified selectors.
• IDs.
• !important.

9. Object Oriented CSS
Understanding HTML

10. • Content
• Padding
• Border
• Margin

11. • Knows only about its inside.
• Looks the same wherever it is put.

12. .form-inputs {
. . .
}
!
.form-actions {
.button {
text-align: right;
margin-left: 1rem;
}
}

13. .form-inputs {
. . .
}
!
.form-actions {
margin-top: 1rem;
.button {
text-align: right;
margin-left: 1rem;
}
}

14. .form-actions {
.button {
text-align: right;
margin-left: 1rem;
}
}
!
.default-form .form-actions {
margin-top: 1rem;
}
!
.vertical-form .form-actions {
margin-top: 0.5rem;
}

15. Doing it right

16. Things change

17. • Atomic Design.
• OOCSS.
• SMACS.

18. The GB way

19. No Frameworks

20. • Subscribe to other developers
structure/naming/style.
• Potential to bloat/unneeded stuff.
• Ability to scale.
• Framework conventions.

21. Tools

22. Folder Structure

24. • Variables.
• Typography.
• Utilities.
• Objects.

25. Objects
• Buttons.
• Forms.
• Icons.
• Layouts.
• Lists.
• Containers.

30. Communication

31. How is design communicated to you?

32. • Colours.
• Sizes.
• Spacing.
• Meanings.
• Relations.

33. Design to Dev

34. • Object image + excel with meta info.
• Pseudo CSS.

35. Dev to Dev / Design

37. Disadvantages?

38. Summary
• Take the time to learn.
• Improve.

39. @gabrielgpoca