Backendowcu, zostań CSS ninja - czyli jak odnaleźć się w świecie nowoczesnego kodu CSS
•
1 like•1,506 views
Prezentacja opowiada o tym, jak ewoluował CSS oraz, że takie pojęcia jak SOLID, DRY, metodyki czy też architektura nie są zarezerwowane tylko dla takich języków programowania jak np. PHP, ale również pojawiają się przy pisaniu stylów.
Recommended
More Related Content
Featured
Featured (20)
Backendowcu, zostań CSS ninja - czyli jak odnaleźć się w świecie nowoczesnego kodu CSS
- 1. WARSZAWA 2017.11.30 BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 2. KIM JESTEM? BACKENDOWCU, ZOSTAŃ CSS NINJA! ANNA MATYSIAK Web Developer Programista / Web Designer Frontend Developer (Python + HTML/CSS/JS) (PHP+ HTML/CSS/JS) amatysiak88@gmail.com
- 3. O CZYM BĘDZIE PREZENTACJA? BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 4. CSS1: 1996 Håkon Wium Lie oraz Bert Bos publikują specyfikację (68 stron formatu A4) CSS2: 1998 do autorów dołączają Chris Lilley i Ian Jacobs (480 stron) PODZIAŁ NA ODDZIELNE SPECYFIKACJE/MODUŁY ‣ LEVEL 3: moduły rozwijające funkcje już istniejące w specyfikacji CSS 2.1 (np Selectors, CSS Text, CSS Color, CSS Values and Units) ‣ LEVEL 1: moduły z całkowicie nowymi koncepcjami (CSS Transforms, Filter Effects, CSS Flexible Box Layout, CSS Grid Layout) HISTORIA CSS BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 5. DRY?
- 6. DOBRE PRAKTYKI „Don’t Repeat Yourself (DRY)” BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 7. DOBRE PRAKTYKI „Don’t Repeat Yourself (DRY)” BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 8. SOLID?
- 9. SOLID BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 10. SOLID S: Single Responsibility Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Klasa powinna mieć tylko jedną odpowiedzialność
- 11. SOLID O: Open/Closed Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Klasa powinna być otwarta na rozszerzenia i zamknięta na modyfikacje
- 12. SOLID L: Liskov Substitution Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Funkcje które używają wskaźników lub referencji do klas bazowych, muszą być w stanie używać również obiektów klas dziedziczących po klasach bazowych, bez dokładnej znajomości tych obiektów
- 13. SOLID L: Liskov Substitution Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Klasa rozszerzająca inną nie powinna zmieniać zachowania klasy bazowej
- 14. SOLID I: Interface Segregation Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Wiele dedykowanych interfejsów jest lepsze niż jeden ogólny.
- 15. SOLID I: Interface Segregation Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Wiele dedykowanych klas jest lepsze niż jedna bardzo ogólna
- 16. SOLID D: Dependency Inversion Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Wysokopoziomowe moduły nie powinny zależeć od modułów niskopoziomowych - zależności między nimi powinny wynikać z abstrakcji.
- 17. SOLID D: Dependency Inversion Principle BACKENDOWCU, ZOSTAŃ CSS NINJA! Zmiany styli klas podrzędnych nie powinny mieć wpływu na style klas nadrzędnych
- 18. METODYKI BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 19. METODYKI
- 20. METODYKI OOCSS - Object Oriented CSS BACKENDOWCU, ZOSTAŃ CSS NINJA! FORM INPUT INPUT INPUT BUTTON
- 21. ‣ Modularny i zorientowany obiektowo CSS ‣ Najpierw klasy globalne, a potem bardziej wyspecjalizowane ‣ Rozdzielone style dla kontenerów i zawartości METODYKI OOCSS - Object Oriented CSS BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 22. Podział styli na 5 grup: ‣ bazowe ‣ layout (prefix l-) ‣ moduły ‣ stan (prefix is-) ‣ temat METODYKI SMACSS - Scalable and Modular Architecture for CSS BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 23. ‣ Modularny kod CSS ‣ Elementy dzielimy na: ‣ bloki (np formularz) ‣ elementy (np input) ‣ modyfikatory (np input do wpisania hasła) METODYKI BEM - Block Element Modifier BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 24. ‣ Klasy CSS niezależne od treści i reużywalne ‣ Najczęściej jednolinijkowe, odpowiadające tylko za jedno ustawienie METODYKI ACSS - Atomic CSS BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 25. PREPROCESORY
- 26. PREPROCESORY BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 27. PREPROCESORY: SASS ZAGNIEŻDŻANIE BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 28. PREPROCESORY: SASS DZIEDZICZENIE BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 29. PREPROCESORY: SASS DZIEDZICZENIE BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 30. PREPROCESORY: SASS MIXINY BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 31. PREPROCESORY: SASS ZMIENNE BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 32. PREPROCESORY: SASS PĘTLE BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 33. PREPROCESORY: SASS I WIELE WIĘCEJ :) http://sass-lang.com/ BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 34. PREPROCESORY: SASS Czy stosować preprocesory? BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 35. PREPROCESORY: SASS Czy stosować preprocesory? BACKENDOWCU, ZOSTAŃ CSS NINJA! TO ZALEŻY :)
- 36. CO SIĘ ZMIENIŁO?
- 37. https://icomoon.io CO SIĘ ZMIENIŁO? „Grafiki dodawaj jako font” BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 38. Kształty dodawane jako style a nie grafiki https://css-tricks.com/examples/ShapesOfCSS/ DOBRE PRAKTYKI „Kształty dodawaj jako style a nie grafiki” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 39. Gradienty dodawane jako style a nie grafiki http://www.colorzilla.com/gradient-editor/ DOBRE PRAKTYKI „Gradienty dodawaj jako style a nie grafiki” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 40. DOBRE PRAKTYKI „Uważnie używaj prefixów” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 41. https://github.com/airbnb/css DOBRE PRAKTYKI „Stosuj Style Guide” BACKENDOWCU, ZOSTAŃ CSS NINJA! https://google.github.io/styleguide/htmlcssguide.html https://github.com/necolas/idiomatic-css CO SIĘ ZMIENIŁO?
- 42. DOBRE PRAKTYKI „Stosuj funkcje z CSS” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 43. DOBRE PRAKTYKI „Stosuj zmienne z CSS” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 44. DOBRE PRAKTYKI „Niech Twój kod będzie RWD” BACKENDOWCU, ZOSTAŃ CSS NINJA! Stosuj jednostki względne, np vh, vw Stosuj max-width, zamiast width Stosuj rozsądnie media query Stosuj podejście mobile first CO SIĘ ZMIENIŁO?
- 45. DOBRE PRAKTYKI „Wykorzystuj Flexbox/Grid” BACKENDOWCU, ZOSTAŃ CSS NINJA! https://codepen.io/justd/pen/yydezN http://the-echoplex.net/flexyboxes CO SIĘ ZMIENIŁO?
- 46. DOBRE PRAKTYKI „Wykorzystuj Flexbox/Grid” BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO?
- 47. CSS: MOŻLIWOŚCI BACKENDOWCU, ZOSTAŃ CSS NINJA! CO SIĘ ZMIENIŁO? https://codepen.io/fbrz/pen/vlrnd
- 48. FRAMEWORKI
- 49. BACKENDOWCU, ZOSTAŃ CSS NINJA! FRAMEWORKI
- 50. JAK POSZERZAĆ SWOJĄ WIEDZĘ Z CSS?
- 51. JAK SIĘ UCZYĆ CSS? Konferencje/meetupy BACKENDOWCU, ZOSTAŃ CSS NINJA!
- 52. Książki/artykuły/blogi BACKENDOWCU, ZOSTAŃ CSS NINJA! JAK SIĘ UCZYĆ CSS?
- 53. Książki/artykuły/blogi BACKENDOWCU, ZOSTAŃ CSS NINJA! JAK SIĘ UCZYĆ CSS? https://developer.mozilla.org/en-US/docs/Web/CSS https://css-tricks.com
- 54. Pair programming BACKENDOWCU, ZOSTAŃ CSS NINJA! JAK SIĘ UCZYĆ CSS?
- 55. Koduj, koduj, koduj :) BACKENDOWCU, ZOSTAŃ CSS NINJA! JAK SIĘ UCZYĆ CSS?
- 56. DZIĘKI ZA UWAGĘ :)
- 57. PYTANIA?
- 58. DZIĘKI ZA UWAGĘ :)