Biff: Kann ein Kommentar in einer css-Datei an beliebiger Stelle stehen?

Kann ein Kommentar in einer css-Datei an beliebiger Stelle stehen?

Also etwa hier:

body/* Z.B. ein Kommentar hier */ {
    background/* Z.B. ein Kommentar hier */: rgba(0, 0, 0, 0/* Z.B. ein Kommentar hier */) none repeat scroll 0 0;
}
body {
    color/* Z.B. ein Kommentar hier */: #000/* Z.B. ein Kommentar hier */;
}
body, #mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPag/* Z.B. ein Kommentar hier */eBoxList ul, #mainWrapper, #popupAdditionalImage, #contentMainWrapper, #header/* Z.B. ein Kommentar hier */Wrapper, .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {
    background: #58cb93 /* Z.B. ein Kommentar hier */ none repeat scroll 0 0;
}
  1. Hallo

    Kann ein Kommentar in einer css-Datei an beliebiger Stelle stehen?

    Im Prinzip ja. Aber ob damit wirklich jeder Browser zurecht kommt? Ich würde solche Konstrukte

    background/* Z.B. ein Kommentar hier */: rgba(0, 0, 0, 0/* Z.B. ein Kommentar hier */) none repeat scroll 0 0;
    

    vermeiden.

    Gruss

    MrMurphy

    1. Hallo!

      Vielen Dank.

      Ich hatte gehofft, mit der Platzierung an derartigen Stellen, Änderungen in Skripten markieren zu können um diese Stellen mit etwa "suchen und ersetzen" wiederfinden, bzw. in einem Vorgang oder zumindest wenigen ersetzen zu können. Gäbe es dafür, das zu tun, ansonsten eine andere Möglichkeit?

      Vielen Dank nochmals.

      1. Hallo

        Gäbe es dafür, das zu tun, ansonsten eine andere Möglichkeit?

        Das kommt auf deinen Editor an. Du musst dir halt einen suchen, der dich bei Änderungen so weit wie möglich und sinnvoll unterstützt.

        Ich selbst bevorzuge schlicht die zeilenweise Anordnung von Anweisungen und Kommentaren. Austauschbare Anweisungen schreibe ich direkt untereinander. Mein Editor (Sublime Text) ermöglicht auf Tastendruck ganze Zeilen aus- und wieder einzukommentieren.

        Das CSS kann dann so aussehen:

        .social-menu ul {
           display: flex;
           flex-wrap: wrap;
           /*Ausrichtung der Icons*/
           /*justify-content: flex-start;*/
           justify-content: flex-end;
           /*justify-content: space-around;*/
           /*justify-content: space-between;*/
        }
        

        Hier kann ich die aktive justify-content Anweisung per Tastendruck aus- und eine andere dafür einblenden. Genau so gut können aber auch alle (in dem Beispiel vier) aktiv sein und die gewünschte aktive wird als letztes aufgeführt.

        Das ist für mich auch zum Lesen für spätere Änderungen am Übersichtlichsten. Mit Kommentaren inmitten der CSS-Anweisungen findet man sich später viel schlechter zurecht. Außerdem sind Änderungen viel aufwändiger.

        Gruss

        MrMurphy

        1. Hallo.

          Ja, das sieht natürlich gut / übersichtlich aus.

          Hier kann ich die aktive justify-content Anweisung per Tastendruck aus- und eine andere dafür einblenden.

          Also, eine einblenden, die zur Zeit kommentiert ist, dafür (oder auch nicht) eine andere ausblenden. Und so merkt sich der Editor alle Stellen / Kommentare aller mit ihm bearbeiteten Dateien? Das ist ja gut. Man kann aber wohl nur jeweils immer eine Zeile, Anweisung bearbeiten, nicht etwa den Editor automatisch mehrere Anweisungen in einer Datei und / oder mehreren Dateien zu ändern, z.B. eine Farbe gegen eine andere.

          Mir wäre daran gelegen, in verschiedenen css-Dateien in einem Vorgang etwa eine bestimmte Farbe auszutauschen, in einem Vorgang. Etwa einen einmal eingefügten Kommentar neben einer Farbe (zusammen als eindeutiges Identifizerungsmerkmal) nach denen man zusammen suchen kann. Das ginge aber bestimmt nicht, wenn der Kommentar in einer anderen Zeile stünde.

          Das ist für mich auch zum Lesen für spätere Änderungen am Übersichtlichsten. Mit Kommentaren inmitten der CSS-Anweisungen findet man sich später viel schlechter zurecht. Außerdem sind Änderungen viel aufwändiger.

          Ja, übersichtlich ist das natürlich nicht, dachte damit vielleicht eben oben genannte Automatisierung erreichen zu können. Daß der Editor sich etwa Farben auch merkt und dann nach Wunsch automatisiert, also in einem Vorgang, ändert, geht bestimmt nicht.

          Werde mir den Editor mal ansehen.

          1. @Biff

            Du suchst wahrscheinlich einen CSS-Präprozessor wie Sass oder Less.

            1. @@mermshaus

              Du suchst wahrscheinlich einen CSS-Präprozessor wie [Sass] oder [Less].

              Warum sollte man LESS suchen, wenn man Sass haben kann? Hat LESS in letzter Zeit so aufgeholt, dass er Sass das Wasser reichen kann?

              Statt Prä- kann es auch Post- sein.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
              1. @Gunnar Bittersmann

                Warum sollte man LESS suchen, wenn man Sass haben kann? Hat LESS in letzter Zeit so aufgeholt, dass er Sass das Wasser reichen kann?

                Ich verlinke gern mehrere Alternativen, wenn es Sinn ergibt. Ich würde im Zweifel aber auch Sass vorziehen. (Ist aber nicht wirklich mein Gebiet. Ich habe selten so komplexe CSS-Anforderungen.)

                Ein Unterschied wäre, dass Sass mit Ruby läuft und Less mit Node. Das wird aber vermutlich selten eine Rolle spielen, weil es ja in der Regel nur auf dem Rechner des/der Entwickler/s ausgeführt wird.

            2. Du suchst wahrscheinlich einen CSS-Präprozessor wie Sass oder Less.

              Vielen Dank für die Links. Zu meinem eigenen Erstaunen bin ich nicht fähig den Seiten zu entnehmen, worum es überhaupt geht bei Sass und Less, wozu man die verwenden kann.

              Was ist der Anwendungsfall dafür? Warum hast du verschiene CSS-Dateien? Warum verwendest du nicht eine?

              Ich will in einem Skript für einen "Shop" (eCommerce), Zen Cart (https://www.zen-cart.com/), Vorlagen (Templates) anpassen. Diese Templates haben mehrere css-Dateien, warum, weiß ich nicht, möglicherweise wegen der Übersichtlichkeit, Vorteile bei der Bearbeitung, bei Updates, oder so.

              colors.css:

              :root
              {
                --green: #007C59;
                --yellow: #FCB514;
                --red: #E23D28;
                --blue: #0C1C8C;
              }
              

              foo.css:

              @import url(colors.css);
              
              #foo
              {
                background: var(--green);
              }
              

              Vielen Dank für das Beispiel. Könnte man so vielleicht auch alle von einem selbst zugefügten Anweisungen in eine einzelne eigene / neu geschaffene css-Datei schreiben, so daß diese Datei einzig diese Anweisungen enthielte und auch (bei Updates) nicht überschrieben werden würde? Allerdings müßte ja vermutlich bei jeder geänderten / zu ändernden Anweisung in den originalen css-Dateien eine Eintrag bestehen, der auf die neue css-Datei hinweist.

              Du kannst das auch durch einen CSS-Postprozessor jagen und damit die Variablen durch die festen Werte ersetzen, damit Edge und Opera Mini und alte Browser das so generierte CSS auch verstehen.

              Oder – wie mermshaus schon sagte – einen CSS-Präprozessor verwenden.

              Beide würden dann bei jedem Zugriff eines Besuchers auf die Website die css-Dateien abarbeiten und die Seiten entsprechend darstellen?

              Vielen Dank nochmals.

              1. Hallo Biff,

                Wenn du „Antworten“ wählst, wird das Vorposting schon richtig als Zitat formatiert in dein Antwortfeld eingefügt. Du brauchst also nicht mit irgendwelchen [QUOTAS] den Beitrag bearbeiten.

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. Hallo Matthias,

                  vielen Dank, ja, das war mir schon aufgefallen. dachte, bei Bezug auf jeweilige Teilzitate wäre das Einfügen des gesamten Zitates eher unbrauchbar, glaube, ich begreife noch nicht ganz, wie man da am besten vorgeht.

                  Vielen Dank nochmals. Bis demnächst.

                  Hallo Biff,

                  Wenn du „Antworten“ wählst, wird das Vorposting schon richtig als Zitat formatiert in dein Antwortfeld eingefügt. Du brauchst also nicht mit irgendwelchen [QUOTAS] den Beitrag bearbeiten.

                  Bis demnächst
                  Matthias

                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.

                  1. Hallo Biff,

                    vielen Dank, ja, das war mir schon aufgefallen. dachte, bei Bezug auf jeweilige Teilzitate wäre das Einfügen des gesamten Zitates eher unbrauchbar, glaube, ich begreife noch nicht ganz, wie man da am besten vorgeht.

                    Du antwortest, und das worauf du dich gerade eben nicht beziehst, löschst du einfach.

                    Vielen Dank nochmals. Bis demnächst.

                    Vollzitate sind natürlich ungeeignet. ;-)

                    Bis demnächst
                    Matthias

                    --
                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                    1. Hallo Matthias,

                      gut, werde ich dann so versuchen.

                      Scheint aber, wie ich gerade zu erkennen meine, ein bißchen umständlich zu sein vielleicht.

                      Dankesehr, bis demnächst.

                      [Vollzitat entfernt]

                      1. Hallo Biff,

                        gut, werde ich dann so versuchen.

                        Scheint aber, wie ich gerade zu erkennen meine, ein bißchen umständlich zu sein vielleicht.

                        Eigentlich nicht. Du brauchst doch nur an die Stellen zu schreiben, auf die du dich beziehen möchtest.

                        Vermeide Vollzitate.

                        Bis demnächst
                        Matthias

                        --
                        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                        1. Hallo Matthias,

                          in Ordnung, werde ich so versuchen.

                          Dankesehr, bis demnächst.

              2. @@Biff

                Du suchst wahrscheinlich einen CSS-Präprozessor wie Sass oder Less.

                Vielen Dank für die Links. Zu meinem eigenen Erstaunen bin ich nicht fähig den Seiten zu entnehmen, worum es überhaupt geht bei Sass und Less, wozu man die verwenden kann.

                CSS-Präprozessoren generieren aus Code, der einer entsprechenden Syntax entspricht (bspw. SCSS), CSS-Code.

                Beispiel: links SCSS-Quelltext; rechts generierter CSS-Code.

                Was ist der Anwendungsfall dafür? Warum hast du verschiene CSS-Dateien? Warum verwendest du nicht eine?

                Ich will in einem Skript für einen "Shop" (eCommerce), Zen Cart (https://www.zen-cart.com/), Vorlagen (Templates) anpassen. Diese Templates haben mehrere css-Dateien, warum, weiß ich nicht, möglicherweise wegen der Übersichtlichkeit, Vorteile bei der Bearbeitung, bei Updates, oder so.

                Das erklärt nicht, warum du für verschiedene Teile einer Website verschiedene Stylesheets verwendest.

                colors.css:

                :root
                {
                  --green: #007C59;
                  --yellow: #FCB514;
                  --red: #E23D28;
                  --blue: #0C1C8C;
                }
                

                foo.css:

                @import url(colors.css);
                
                #foo
                {
                  background: var(--green);
                }
                

                Vielen Dank für das Beispiel. Könnte man so vielleicht auch alle von einem selbst zugefügten Anweisungen in eine einzelne eigene / neu geschaffene css-Datei schreiben, so daß diese Datei einzig diese Anweisungen enthielte und auch (bei Updates) nicht überschrieben werden würde?

                Genau das wollte ich mit dem Beispiel aufzeigen. colors.css ist deine „einzelne eigene / neu geschaffene css-Datei“, die von den anderen verwendet wird. (Statt des @import könnte die colors.css auch im HTML eingebunden werden.)

                Allerdings gibt es in CSS keine „Anweisungen“, sondern nur „Hinweisungen“, wie Orlando anno dazumals schon anmerkte.

                Oder – wie mermshaus schon sagte – einen CSS-Präprozessor verwenden.

                Beide würden dann bei jedem Zugriff eines Besuchers auf die Website die css-Dateien abarbeiten und die Seiten entsprechend darstellen?

                Nein. Beide arbeiten, bevor ein Besucher auf die Website zugreift. (LESS ließe sich auch mit JavaScript beim Aufruf der Seite kompilieren, aber das lassen wir mal.)

                Der Unterschied zwischen Präprozessor und Postprozessor ist, dass ein Präprozessor aus etwas anderem als CSS (bspw. SCSS) CSS-Code generiert und ein Postprozessor aus CSS anderes CSS macht.

                LLAP 🖖

                --
                „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                1. Vielen Dank für die Beispiele.

                  Ich will in einem Skript für einen "Shop" (eCommerce), Zen Cart (https://www.zen-cart.com/), Vorlagen (Templates) anpassen. Diese Templates haben mehrere css-Dateien, warum, weiß ich nicht, möglicherweise wegen der Übersichtlichkeit, Vorteile bei der Bearbeitung, bei Updates, oder so.

                  Das erklärt nicht, warum du für verschiedene Teile einer Website verschiedene Stylesheets verwendest.

                  Verzeihung, hatte Dich wohl falsch verstanden, bzw. verstehe momentan nicht ganz: also, ich selber verwende sozusagen zunächst einmal gar keine css-Datei, die sind ja bei dem Template dabei, die habe ich ja nicht geschaffen, die css-Dateien würde ich nur anpassen wollen daran, wie ich die Darstellung haben wollte, bzw. falls es sinnvoll wäre eine eigene css-Datei erstellen. Warum mehr als eine css-Datei in den Template(s) / für Teile jenes Skriptes verwendet werden, weiß ich leider nicht, deshalb hatte ich es nur, vermutlich unzureichend, vermutet.

                  Genau das wollte ich mit dem Beispiel aufzeigen. colors.css ist deine „einzelne eigene / neu geschaffene css-Datei“, die von den anderen verwendet wird. (Statt des @import könnte die colors.css auch im HTML eingebunden werden.)

                  Das ist ja wunderbar, dann könnte ich also in einer neu geschaffenen css-Datei die komplette Vorlage / das komplette Skript nach Belieben anpassen, und diese Änderungen blieben ja auch nach einem Update noch bestehen. Aber, falls ich recht sehe, in die original css-Dateien müßten doch auch gewisse (verstehe, es gibt nur "Hinweisungen" in CSS) Hinweisungen kommen, bzw. jedenfalls Informationen (zur Verarbeitung), die Bezug zur neuen css-Datei haben. Aber vielleicht genügte ja gar eine einzige, leicht wieder (nach einer Überschreibung) hinzuzufügenden Zeichenfolge.

                  Spürbare Geschwindigkeitsverluste beim Aufbau / der Darstellung der Seiten gibt es bei der Nutzung all diser Möglichkeiten / Prä-, Postprozessor vermutlich nicht, da letztere ja also Code / Informationen verarbeiten vor dem Besuch einer Seite, so daß es offenbar keine negative Auswirkungen auf diese Gewschwindigkeit geben kann.

                  Vielen Dank.

                  1. @Biff @Gunnar Bittersmann

                    Verzeihung, hatte Dich wohl falsch verstanden, bzw. verstehe momentan nicht ganz: also, ich selber verwende sozusagen zunächst einmal gar keine css-Datei, die sind ja bei dem Template dabei, die habe ich ja nicht geschaffen, die css-Dateien würde ich nur anpassen wollen daran, wie ich die Darstellung haben wollte, bzw. falls es sinnvoll wäre eine eigene css-Datei erstellen. Warum mehr als eine css-Datei in den Template(s) / für Teile jenes Skriptes verwendet werden, weiß ich leider nicht, deshalb hatte ich es nur, vermutlich unzureichend, vermutet.

                    So klingt es eher danach, als wäre eine einzige zusätzliche Datei mit Änderungen der beste Weg. Die verlinkst du im Template hinter allen anderen CSS-Dateien. Dann kannst du darin gezielt Werte aus den übrigen CSS-Dateien überschreiben.

                    (Wenn in einer Datei zum Beispiel a { color: blue; } steht, könntest du in der eigenen Datei dann mit a { color: red; } diesen Wert überschreiben. Deine Angabe hat Vorrang, weil sie zuletzt ausgewertet wird.)

                    Das hat den Vorteil, dass du bei späteren Updates der Originaldateien nur diese eigene Datei anpassen und wahrscheinlich neu im Template einbinden musst.

                    Es kann dann Sinn ergeben, diese eine Datei vorher mit Sass oder Less zu erzeugen, aber das wäre dann eben nur deine spezielle Arbeitsweise. Am Ende kommt immer eine fertige CSS-Datei raus, die du dann mit in das System/auf den Server packst und wie beschrieben einbindest.

                    (Ich kann aber nicht ausschließen, dass das von dir genutzte System noch elegantere Wege für derlei Anpassungen anbietet. Da bin ich zu wenig im Thema. Ich würde nicht unbedingt damit rechnen, aber ich erwähne es, damit es gesagt ist. Falls die Support haben, vielleicht auch mal da fragen.)

                    Aber, falls ich recht sehe, in die original css-Dateien müßten doch auch gewisse (verstehe, es gibt nur "Hinweisungen" in CSS) Hinweisungen kommen, bzw. jedenfalls Informationen (zur Verarbeitung), die Bezug zur neuen css-Datei haben. Aber vielleicht genügte ja gar eine einzige, leicht wieder (nach einer Überschreibung) hinzuzufügenden Zeichenfolge.

                    Wenn du (wie oben beschrieben) eine Datei erstellst, die Overrides für bestehende Regeln enthält, brauchst du die anderen Dateien nicht anzurühren. Das ist wahrscheinlich die geschicktere oder zumindest unkompliziertere Vorgehensweise. (Je nachdem, was sich bei Updates konkret ändert, ist eine gewisse Nacharbeit aber bei jeder Vorgehensweise unumgänglich.)

                    Was Gunnar beschreibt, wäre – etwas auf deinen Fall gemünzt – der Ansatz, die Originaldateien zu bearbeiten, aber dabei so was wie Farben dann zumindest zentral definieren zu können. Das halte ich aber für deinen Fall für zu umständlich, falls das System das nicht irgendwie unterstützt (und selbst dann). Insbesondere dann, wenn die erwähnten Konzepte (wie Prä-/Postprozessoren) neu für dich sind. Du bräuchtest dann sicherlich auch so was wie eine echte Versionierung und müsstest bei Updates im Grunde einen „dreckigen“ Merge machen (will man immer vermeiden), und der Build-Prozess für die fertigen CSS-Dateien wäre auch komplexer, weil du dabei ständig diverse Dateien erzeugen und in das eigentliche System verschieben müsstest (vermutlich in verschiedene Verzeichnisse). Das wäre dann eigentlich ein Job für ein Sync-Tool, wenn du während der Entwicklung durch das ständige Kopieren nicht früher oder später wahnsinnig werden willst. Also, das wäre hier für deine Problemstellung, wie ich sie verstehe und einschätze, in jedem Fall ganz erheblich involvierter.

          2. @@Biff

            Mir wäre daran gelegen, in verschiedenen css-Dateien in einem Vorgang etwa eine bestimmte Farbe auszutauschen, in einem Vorgang.

            Was ist der Anwendungsfall dafür? Warum hast du verschiene CSS-Dateien? Warum verwendest du nicht eine?

            In modernen Browsern (außer Edge und Opera Mini) kannst du das mit custom properties (CSS-Variablen) umsetzen:

            colors.css:

            :root
            {
              --green: #007C59;
              --yellow: #FCB514;
              --red: #E23D28;
              --blue: #0C1C8C;
            }
            

            foo.css:

            @import url(colors.css);
            
            #foo
            {
              background: var(--green);
            }
            

            Du kannst das auch durch einen CSS-Postprozessor jagen und damit die Variablen durch die festen Werte ersetzen, damit Edge und Opera Mini und alte Browser das so generierte CSS auch verstehen.

            Oder – wie mermshaus schon sagte – einen CSS-Präprozessor verwenden.

            LLAP 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe