Organisation von css-Files

  • cermit cermit
    R2-D2
    0 x
    108 Beiträge
    0 Hilfreiche Beiträge
    19. 05. 2010, 23:50

    Hallo!
    Ich suche nach einer guten Lösung zur übersichtlichen Einbindung von css-Files. Für mein Projekt habe ich verschiedene css-Files erstellt, etwa für jede der eingesetzten Erweiterungen ein eigenes File, eine css-Datei zur Formatierung des grundlegenden Seitenlayouts ...

    Diese Files habe ich via page.includeCSS in den verschiedenen Templates und Subtemplates eingefügt. Dabei geht leider die Übersicht verloren, allein zu wissen die wie vielte Datei eingebunden wird ist schwierig, weil ich dazu wissen muss, in welchem Template ich zuletzt eine css-Datei eingebunden habe, um das Fragezeichen im Typoscript richtig ersetzen zu können:

    1. page.includeCSS {
    2. file? = fileadmin/templates/styles.css

    Wahrscheinlich ist meine Lösung ziemlich stümperhaft. Vielleicht könnt Ihr mir ein wenig auf die Sprünge helfen.

    Besten Dank
    Christoph


  • 1
  • Bebbi Bebbi
    Sternenflotten-Admiral
    0 x
    244 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2010, 09:45

    Hi Christoph

    ich weiss zwar nicht ob es dein Problem löst, aber ich versuche es über die Extension "Page StyleSheet Selector" (Key: css_select).

    Damit kannst du pro Seite ein CSS einfügen und reduzierst die Anzahl drastisch.

    Viele Grüsse

    Bebbi

  • cermit cermit
    R2-D2
    0 x
    108 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2010, 16:02

    Vielen Dank für Deine Antwort.

    Allerdings würde ich lieber auf die Installation einer Erweiterung für diesen Zweck verzichten. Es geht mir ja eigentlich nicht darum, weniger css-Files laden zu müssen, sondern eher darum eine Struktur zu finden, bei der ich bei der Entwicklung des Projekts die Übersicht behalten kann.

    In jedem Fall werde ich die css_select im Hinterkopf behalten, sofern sich keine andere Lösung ergibt.

    Gruß
    Christoph

  • Norman2k Norman2k
    Jedi-General
    0 x
    1650 Beiträge
    76 Hilfreiche Beiträge
    20. 05. 2010, 17:50

    Wieso bindest du nicht alle im Root-Template ein? Ich trenne mein TS zwar auch auf aber so etwas würde ich immer zusammenhängend an einer Stelle platzieren. Kannst ja auch ein extra Template "CSS" erstellen und im Root einbinden.
    Sinnvoller wäre aber 1 CSS, damit reduzierst du die Anzahl der HTTP-Requests.

  • Michaelh74 Michaelh7...
    Jedi-General
    0 x
    1519 Beiträge
    0 Hilfreiche Beiträge
    21. 05. 2010, 09:20

    1. page.includeCSS {
    2. file? = fileadmin/templates/styles.css

    Gegen diese Lösung spricht nichts. Ins Root TS Setup. Dann kannst Du bei Bedarf auf Unterseiten über ein Ext. Template weitere CSS hinzufügen oder ggf. überschreiben.
    Wenns denn mal viele CSS Files werden sollen (kann auch zur Übersichtlichkeit dienen) kann eine Extension wie z.B. scriptmerger, die alle nötigen CSS Files in eine zusammenfasst helfen - aber kein Muss.

    Gruß
    Michael

  • Benjamecho Benjamech...
    Sternenflotten-Admiral
    0 x
    202 Beiträge
    0 Hilfreiche Beiträge
    17. 08. 2010, 09:40

    Verzichte doch auf einfach auf die Durchnummerierung und wähle eine individuelle Bezeichnung:

    1. page.includeCSS {
    2. seitenlayout = fileadmin/templates/styles.css

  • theis theis
    Jedi-Meister
    0 x
    268 Beiträge
    0 Hilfreiche Beiträge
    24. 08. 2010, 15:42

    Hallo Christoph,

    ich möchte die Antwort von Benjamecho noch ergänzen.

    Ich mache es immer so:

    1. page.includeCSS {
    2. NameDerExtension = fileadmin/templates/DomainName/ext/NameDerExtension/NameDerExtension.css
    3. #Bsp.:
    4. chgallery = fileadmin/templates/habex/chgallery/chgallery.css
    5. }

    Somit habe ich immer alle Dateien einer Extension in einem Ordner und sehe auf der Homepage auch direkt, welche CSS-Datei für welche Extension verantwortlich ist.

    Gruss
    Theis

  • 1