Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.

1. Webseiten modular
entwickeln
Jens Grochtdreis

2. ‣ Frontendentwickler
‣ seit 1999 Arbeit im und fürs Web
‣ seit 2009 selbständig
‣ Frontendentwicklung
‣ Schulung
‣ Beratung
‣ twitter.com/Flocke

3. Seite ist eine Ansammlung
von Modulen

6. ‣ Jede Box hat eine obere Linie.
‣ Die Inhalte differieren, sind aber prinzipiell
Listen.
‣ Eine Box kann eine Überschrift enthalten.

7. Platzierung sollte egal sein

9. Module entwickeln,
nicht ganze Seiten!

10. Layout: Seitengrundgerüst

11. Module tragen
Designinformationen

12. Umfangreiche Modulliste

13. http://structurae.de

19. Jedes dieser Module
ist eine eigene Datei

23. Module richtig entwickeln

24. Das Modul ist sein eigenes
Universum!

25. Trennung zwischen
Layout und Design

26. Semantisch = HTML
Design = CSS

27. http://jsfiddle.net/Flocke/psAwV/

28. Schnipsel im CSS dank
Präprozessoren

29. CSS ist manchmal
nervtötend unflexibel.

30. Einfacher wird es, wenn man
CSS „programmiert“!

32. zentrales Stylesheet
importiert Module und
generiert ein CSS-File

35. Variablen

38. Module in Sass
‣ Ein Unterstrich vor der
Dateiendung verhindert
das rendern als einzelne
Datei. Es entsteht ein
„partial“. So kann man
diese in eine zentrale
Datei importieren und
nachher gesammelt
rendern lassen.

39. Richtiger Umgang
mit Klassen

41. https://github.com/stubbornella/oocss/wiki

42. Styling über Klassen

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

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

45. https://smacss.com/

46. Die einzelnen Bestandteile
1. Base
2. Layout
3. Module
4. State (Zustand)
5. Theme

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

48. Block, Element, Modifier

49. Namenskonventionen

50. Klassen sind manchmal
sinnvoller, als
Kontextselektoren

52. Semantische Klassen?

53. Nein! Pflegbare!

54. CSS = Optik
Semantik = HTML

55. Farben über Klassen
zuweisen

56. CSS

57. SCSS

58. Variablen in Sass

59. ‣ IDs wenn überhaupt dann nur für
grundlegende Elemente des Layouts nutzen.
‣ #header, #main, #sidebar, #footer
‣ Und natürlich für Formularelemente!
‣ Optik von Modulen über separate Klassen
modifizieren.

60. ‣ Weitere Trennung sinnvoll:
‣ Klassen nur für Layout
‣ Klassen nur für Design
‣ Grundaufbau
‣ Theme
‣ Zustand
‣ Klassen nur für Zugriff mittels JavaScript

61. Realistische Dummy-Inhalte

62. http://www.mangrove.com/blog/1079/death-to-lorem-ipsum

63. Navigation

64. http://www.blindtextgenerator.de/

65. http://bueltge.de/html-ipsum/

66. Vorsicht bei horizontaler
Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/

67. Dummybilder
http://dummyimage.com/ http://lorempixel.com/

68. Dummybilder
http://placekitten.com/

69. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
https://github.com/jensgro
http://webkrauts.de
http://slideshare.net/Flocke669
https://speakerdeck.com/flocke