Modulare Webentwicklung

Kurze Darstellung meiner Gedanken über modulare Webentwicklung. Mittlerweile habe ich diese in einem E-Book konkretisiert. Mehr dazu unter http://modulare-webentwicklung.de

Transcript

1. Modulare
   Webentwicklung
   Jens Grochtdreis
   

   View Slide

2. Ziele
   ‣ Mehrere Personen arbeiten an einem
   Projekt.
   ‣ Einzelne Seitenbestandteile können in
   anderen Projekten wiederverwendet
   werden.
   ‣ Theming
   ‣ Arbeit in einem Living Styleguide
   ‣ Dokumentation in einem Living Styleguide
   http://upload.wikimedia.org/wikipedia/commons/3/32/Lego_Color_Bricks.jpg
   

   View Slide

3. Seite ist eine Ansammlung
   von Modulen
   

   View Slide

4. http://daverupert.com/2013/04/responsive-deliverables/
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. Trennung von
    Layout und Modulen
    

    View Slide

11. Layout - meist ein Grid
    

    View Slide

12. Module - die Inhalte
    

    View Slide

13. Platzierung sollte egal sein
    

    View Slide

14. Wichtigste Grundbedingung
    

    View Slide

15. Die Module müssen für sich
    selber stehen!
    

    View Slide

16. View Slide

17. Möglichst wenige Ebenen!
    

    View Slide

18. View Slide

19. View Slide

20. Kaskade und Spezifität
    

    View Slide

21. ‣ Grundlage des Überschreibens der
    Standardkonfiguration sind Kaskade und
    Spezifität.
    ‣ Kaskade: „wer zuletzt kommt malt zuerst“
    ‣ Spezifität
    http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
    

    View Slide

22. Einfache Kaskade
    

    View Slide

23. http://codepen.io/jensgro/full/LEcGF/
    

    View Slide

24. Einfache Spezifität
    

    View Slide

25. View Slide

26. Spezifität erhöhen
    

    View Slide

27. !important
    ‣ Mit !important gibt man einer Regel eine
    Super-Spezifität.
    ‣ Diese wiederum zu überschreiben erfordert
    wieder !important.
    ‣ !important sollte sehr selten, in absoluten
    Ausnahmefällen genutzt werden. 

    Am Besten nie!
    

    View Slide

28. ID wird zum
    Attributselektor
    

    View Slide

29. Eine Klasse verdoppeln
    

    View Slide

30. Richtiger Umgang
    mit Klassen
    

    View Slide

31. ‣ Vorsicht walten lassen
    ‣ Mit allgemeinen Regeln beginnen
    ‣ Spezifität nur im Notfall erhöhen
    ‣ Lieber eine neue Klasse als Ausnahme
    ‣ IDs selten nutzen
    

    View Slide

32. View Slide

33. View Slide

34. Modifikatoren
    

    View Slide

35. Modifikator
    

    View Slide

36. Das media-Element
    http://jsbin.com/ipupew/2/
    

    View Slide

37. View Slide

38. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
    

    View Slide

39. Zusammenfassen und
    Ausnahmen gestalten
    

    View Slide

40. View Slide

41. View Slide

42. Unpraktische Klassennamen
    

    View Slide

43. View Slide

44. View Slide

45. http://bem.info/method/
    BEM
    

    View Slide

46. Block, Element, Modifier
    

    View Slide

47. Namenskonventionen
    

    View Slide

48. https://twitter.com/oknoblich/status/472320546202742784
    Aber praktisch!
    

    View Slide

49. https://css-tricks.com/bem-101/
    

    View Slide

50. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
    

    View Slide

51. 1 2 3
    1
    

    View Slide

52. View Slide

53. Ziemlich unnützes BEM
    

    View Slide

54. Hier ist BEM nützlich
    

    View Slide

55. https://leanpub.com/modularewebentwicklung
    

    View Slide

56. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://github.com/jensgro
    http://webkrauts.de
    https://speakerdeck.com/flocke
    

    View Slide