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
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
3. Seite ist eine Ansammlung von Modulen
4. http://daverupert.com/2013/04/responsive-deliverables/
10. Trennung von Layout und Modulen
11. Layout - meist ein Grid
12. Module - die Inhalte
13. Platzierung sollte egal sein
14. Wichtigste Grundbedingung
15. Die Module müssen für sich selber stehen!
17. Möglichst wenige Ebenen!
20. Kaskade und Spezifität
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
22. Einfache Kaskade
23. http://codepen.io/jensgro/full/LEcGF/
24. Einfache Spezifität
26. Spezifität erhöhen
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!
28. ID wird zum Attributselektor
29. Eine Klasse verdoppeln
30. Richtiger Umgang
    mit Klassen
31. ‣ Vorsicht walten lassen ‣ Mit allgemeinen Regeln beginnen ‣ Spezifität nur im Notfall erhöhen ‣ Lieber eine neue Klasse als Ausnahme ‣ IDs selten nutzen
34. Modifikatoren
35. Modifikator
36. Das media-Element http://jsbin.com/ipupew/2/
38. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
39. Zusammenfassen und Ausnahmen gestalten
42. Unpraktische Klassennamen
45. http://bem.info/method/ BEM
46. Block, Element, Modifier
47. Namenskonventionen
48. https://twitter.com/oknoblich/status/472320546202742784 Aber praktisch!
49. https://css-tricks.com/bem-101/
50. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
51. 1 2 3 1
53. Ziemlich unnützes BEM
54. Hier ist BEM nützlich
55. https://leanpub.com/modularewebentwicklung
56. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de https://speakerdeck.com/flocke