Pro Yearly is on sale from $80 to $50! »

Modulare Webentwicklung

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

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

October 28, 2017
Tweet

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/

  5. None
  6. None
  7. None
  8. None
  9. None
  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!

  16. None
  17. Möglichst wenige Ebenen!

  18. None
  19. None
  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

  25. None
  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
  32. None
  33. None
  34. Modifikatoren

  35. Modifikator

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

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

  39. Zusammenfassen und Ausnahmen gestalten

  40. None
  41. None
  42. Unpraktische Klassennamen

  43. None
  44. None
  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

  52. None
  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