string(13) "art1576456296" Die Krux eine gute Dateistruktur zu finden - Teil 2

Die Krux eine gute Dateistruktur zu finden - Teil 2

von Dennis

Nachdem wir die Ordnerstruktur festgelegt hatten, konnten wir uns nun die Dateien vornehmen. Und wieder gab es unzählige Möglichkeiten, die eine Entscheidung erschwerten.

Dabei waren es vor allem die SCSS-Dateien, die uns Kopfzerbrechen bereiteten. Die Theme-Struktur sollte möglichst modular aufgebaut sein. Ungenutzte Styling-Anweisungen sollten sich einfach erkennen und deaktivieren lassen, d.h. wer kein Akkordeon auf der Website verwendet, sollte eine _accordion.scss „auskommentieren“ können.

Um dennoch den Überblick zu behalten, hatten wir 2 Ideen: Entweder wir arbeiten mit Dateinamen-Präfixen, also zum Beispiel _components.accordion.scss oder mit weiteren Unterordnern. Die Präfix-Idee hatten wir von Harry Roberts abgeschaut, der so sein Framework inuitcss aufgebaut hatte (hier ein Beispiel).

Nach einer Woche landeten wir aber doch bei der Lösung mit Unterordnern, da die langen Dateien in vielen Code-Editoren immer nur abgekürzt angezeigt wurden und so ein schnelles Zurechtfinden, wenn man viele Dateien geöffnet hat, erschwerten.

Nun sieht die Ordner-Struktur also so aus:

files (root folder)
|--content (aka the clients folder) |--theme |--assets (for extensions: modernizr, slider etc.)
|--dist (for production files) |--css
|--fonts
|--img |--js |--src
|--nutshell (our base-framework)
|--fonts
|--img
|--js
|--scss
|--base
|--components
|--generic
|--mixins |--themes(for working files)
|--default
|--fonts
|--img
|--js
|--scss
|--base
|--components
|--generic
|--mixins

Und so sieht die SCSS-Dateistruktur in unserem Basis-Framework Nutshell aus:

|-- scss
_variables.scss

|--base
_grid.scss
_layout.scss
_page.scss
_shared.scss
_type.scss

|--components
_accordion.scss
_links.scss
_events.scss
_faq.scss
_forms.scss
_media.scss
_navs.scss
_news.scss
_newsletter.scss
_slider.scss
_tables.scss

|--generic
_box-sizing.scss
_contao-reset.scss
_normalize.scss

|--mixins
_global.scss
_responsive.scss

nutshell.scss

Im Theme-Ordner default soll dann eine Kopie der Ordner- und Dateistruktur vorliegen, so dass Entwickler ihre individuellen Anweisungen hinzufügen können.

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 9 und 3.