Weniger Schlecht CSS Schreiben Präsentation für VrlbgWebDev Mai 2018

1. WENIGER SCHLECHT CSS
SCHREIBEN
FELIPE PROAÑO

2. HINWEIS
HINWEIS
Die folgende Präsentation ist nicht für alte
Browsern(cough cough IE) geeignet.
WHAT DO YOU
WANT?
PLEASE INCLUDE ME IN
YOUR PRESENTATION *Enthält Produktplatzierungen

3. ÜBER MICH
FELIPE PROAÑO
- PHP Programmierer(mehr Backend als Frontend)
beim Webgears GmbH.
- twitter: @felipep86

4. WENIGER SCHLECHT CSS SCHREIBEN
WIE BIN ICH HIER GELANDET?

5. WENIGER SCHLECHT CSS SCHREIBEN
GRÜNDE
Unser Frontend Dev ist leider gegangen. Danach 4 Backend Devs in Frontend. Und Trotz Motivation

6. WENIGER SCHLECHT CSS SCHREIBEN
WAR DAS ERGEBNIS

7. TEXT
FÜR MICH (WIEDER) IN CSS ARBEITEN

8. WENIGER SCHLECHT CSS SCHREIBEN
INSPIRATION, QUELLEN..

9. WENIGER SCHLECHT CSS SCHREIBEN
MOTIVATION
WebDev März 2018 (nicht gut besucht)

11. WENIGER SCHLECHT CSS SCHREIBEN
INHALT
- Grundsteine für weniger schlecht CSS
- Responsive Design
- Maintainable Code Code
- Performance

12. WENIGER SCHLECHT CSS SCHREIBEN
RESPONSIVE DESIGN
Reset CSS

13. WENIGER SCHLECHT CSS SCHREIBEN
BORDER BOX SIZING

14. WENIGER SCHLECHT CSS SCHREIBEN
RICHTIGE BREAKPOINTS SETZENNG OUR BREAKPOINTS: THE OPTIONS
PERFECT
BAD
GOOD
Designbreaks
Designbreaks
Designbreaks
Designbreaks
NG OUR BREAKPOINTS: THE OPTIONS
PERFECT
BAD
GOOD
Designbreaks
Designbreaks
Designbreaks
Designbreaks
G OUR BREAKPOINTS: THE OPTIONS
ERFECT
BAD
GOOD
Designbreaks
Designbreaks
Designbreaks
Designbreaks

15. WENIGER SCHLECHT CSS SCHREIBEN
RICHTIGE BREAKPOINTS SETZEN

16. WENIGER SCHLECHT CSS SCHREIBEN
MOBILE FIRST VS DESKTOP FIRST
RESPONSIVE DESIGN STRATEGIES
MOBILE-FIRST
• Start writing CSS for mobile devices: small scre
• Then, media queries expand design to a large de
• Forces us to reduce websites and apps to the a
• Start writing CSS for the desktop: large screen;
• Then, media queries shrink design to smaller sc
DESKTOP-FIRST
CSS for mobile devices: small screen;
ueries expand design to a large desktop screen;
educe websites and apps to the absolute essentials.
CSS for the desktop: large screen;
ueries shrink design to smaller screens.

17. WENIGER SCHLECHT CSS SCHREIBEN
RESPONSIVE IMAGES
Responsive
design
The goal of responsive images is to serve the right image to the right screen size and
device, in order to avoid downloading unnecessary large images on smaller screens.
RESPONSIVE IMAGES
1MB ! 1MB " 1MB ! 20
esponsive images is to serve the right image to the right screen size and
er to avoid downloading unnecessary large images on smaller screens.
1MB " 1MB ! 200kb !

18. WENIGER SCHLECHT CSS SCHREIBEN
MAINTAINABLE AND SCALABLE CODE
UILD ARCHITECT
ATOMIC DESIGN
COMPONENT
[Image taken from bradfrost.com]
es;
ent projects;
e on the page.

19. WENIGER SCHLECHT CSS SCHREIBEN
BEM
BUILDING WITH MEANINGFUL CLASS NAMES
ARCHITECTTHINK BUILD
• Block Element Modifier
• BLOCK: standalone component that is meaningful on its own.
• ELEMENT: part of a block that has no standalone meaning.
• MODIFIER: a different version of a block or an element.
BEM
Low-specificity BEM selectors

20. WENIGER SCHLECHT CSS SCHREIBEN
THE 7-1 PATTERN
ARCHITECTING WITH FILES AND FOLDERS
BUILDTHINK ARCHITECT
7 different folders for partial Sass files, and
1 main Sass file to import all other files into
a compiled CSS stylesheet.
THE 7-1 PATTERN
• base/
• components/
• layout/
• pages/
• themes/
• abstracts/
• vendors/
THE 7 FOLDERS

21. WENIGER SCHLECHT CSS SCHREIBEN
GUTE KLASSEN NAMEN
beschreibende Namen
doppelgänger Vermeiden
Präfixes verwenden (zb für JS js- has- is- für state)
Mehr als 2 Wörter sind zu viel

22. WENIGER SCHLECHT CSS SCHREIBEN
LUSTIGE KOMMENTARE VERMEIDEN

23. WENIGER SCHLECHT CSS SCHREIBEN
KENNE DEINE TOOLS
CSS Preprocessor
IDE
Plugins zb Emmet (https://emmet.io/)

24. WENIGER SCHLECHT CSS SCHREIBEN
WEBGEARS OFFENE STELLEN
http://www.webgears.de/career/

25. WENIGER SCHLECHT CSS SCHREIBEN
QUELLEN:
Advanced CSS and Sass: Jonas Schmedtmann https://www.udemy.com/advanced-css-and-sass
Weniger schlecht Programmieren: Kathrin Passig Johannes Jander https://www.amazon.de/Weniger-schle
3897215675
Coding Cards: Thorsten Diekhof http://coaching.cards/produkt/coding-cards/
Gifs von giphy.com
Videos von youtube.com