Wirkungsort einer CSS-Anweisung finden

[Zille]

Wie kann man (einigermaßen elegant) herausbekommen, ob und vor allem wo eine einzelne CSS-Anweisung aus einem externen Stylesheets zur Anwendung kommt?
Ich sehe in einem älteren Stylesheets etwas, von dem ich nicht weiß, ob das überhaupt noch gebraucht wird.
Ist das Kunst oder kann das wech?

[planepix]

Zum Beispiel: https://purifycss.online
ich würde da aber das CSS vorher sichern. Die Optimierung könnte auch zu gründlich sein

[Zille]

Das scheint wohl respeklos zu agieren.
Na ja, ich dachte auch eher daran, erst einmal angezeigt zu bekommen, ob es ungenutzte Anweisungen gibt. Das Aufräumen würde ich dann schon gern selbst übernehmen. Denn bei einer automatischen Entfernung kann ich ja wiederum nicht sehen, wo was nicht richtig war …

[stefan-at-work]

Es gibt eine Chrome Extension zum aufspüren von ungenutzen CSS-Anweisungen (ungetestet)

[planepix]

Auch spannend ist: https://cssstats.com/

Wenn man denkt man hat immer den einen gleichen Farbwert verwendet .

[mlweb]

Nicht genutztes CSS ist ja beim Aufräumen nur ein Part. Viel häufiger sieht man das x_fache unnötige Überschreiben von Stils. Ganz besonders, wenn Themes verwendet werden. Lässt sich dann auch nicht immer vermeiden, wenn es ein Low-Budget-Projekt ist und/oder die ursprüngliche Flexibilität und "Einstellbarkeit" für den Kunden erhalten bleiben soll/muss.

[mlweb]

Auch spannend ist: https://cssstats.com/

Das kannte ich noch gar nicht.

[Zille]

Es gibt eine Chrome Extension zum aufspüren von ungenutzen CSS-Anweisungen (ungetestet)

Diese Extension zeigt an, was alles nicht genutzt wird – hilft aber nicht bei der Suche, wo sich eine bestimmte Anweisung "versteckt".

Auch spannend ist: https://cssstats.com/
Wenn man denkt man hat immer den einen gleichen Farbwert verwendet .

Ach du liebe … da habe ich ja in ein Wespennest gestochen.
Manches per Definition zwar unterschiedlich, dennoch visuell kaum zu unterscheiden – und so werden für ein Projekt mit gerade mal 19 Seiten 28 Farbwerte angezeigt:

28 unique colors
Printed by declaration order in source code
Aa
#fff
Aa
#333
Aa
#ccc
Aa
#323539
Aa
#ffffff
Aa
#5e6369
Aa
#3479c6
Aa
#699b50
Aa
#df4111
Aa
#547c40
Aa
#29609e
Aa
#b2340d
Aa
#43484d
Aa
white
Aa
#f1f4f8
Aa
#858585
Aa
#3f4348
Aa
#5c5c5c
Aa
inherit
Aa
#5a5d63
Aa
#c6c8ca
Aa
#c2c6cc
Aa
#d3d6da
Aa
#92969c
Aa
#e1e1e1
Aa
black
Aa
#444
Aa
red

Und genau an dieser Stelle setzt meine ursprüngliche Frage an: Wie finde ich heraus, für welche Stelle beispielsweise die letzte Farbdefinition "red" (die es im übrigen nur ein einziges mal gibt) angelegt wurde?
Bei nur 19 Seiten kann ich selbstverständlich noch jeweils einzeln den Quellcode aufrufen und per Suchfunktion zum Ziel kommen … Aber um so größer das Projekt, um so umständlicher wird es.

[mlweb]

Durchsuch doch einfach Deine css-Dateien.

[Zille]

Durchsuch doch einfach Deine css-Dateien.

Das hast du falsch verstanden – denn in einer css-Datei habe ich eine Anweisung gefunden, vor der ich nicht weiß, auf welcher Seite sie zum tragen kommt. Und so frage ich mich, ist das Kunst oder kann das weg? (Wie oben schon geschrieben, ist das bei nur 19 Seiten noch kein Problem.)

[Stefko]

Moinsen,

in einer css-Datei habe ich eine Anweisung gefunden, vor der ich nicht weiß, auf welcher Seite sie zum tragen kommt. Und so frage ich mich, ist das Kunst oder kann das weg? (Wie oben schon geschrieben, ist das bei nur 19 Seiten noch kein Problem.)

Du könntest die DB nach der Klasse durchsuchen, wenn sie im Backend von Hand gesetzt wurde, müsste sie ja dort auftauchen. Es kann ja aber auch sein, dass sie von einer Extension oder einem Template kommt, also würde ich sicherheitshalber auch eine Suche über den kompletten Contao-Verzeichnisbaum laufen lassen.
Die Anzahl der Seiten, bzw. die Größe der Seite spielt dabei weniger eine Rolle als die Zahl der zu suchenden CSS-Klassen.

[derRenner]

Hallo,

check mal https://www.jitbit.com/unusedcss/
It follows internal links on your website recursively and looks on multiple pages.

Ich muss gestehen, dass ich deinem gewünschten Ziel noch nicht recht folgen kann.
Denn wenn du glaubst, dass du eine nicht verwendete Anweisung gefunden hast, dann lass dir mit einem dieser bereits genannten tools ausgeben, welche CSS Anweisungen nicht benutzt werden und dann suche deine gefunde Anweisung (von der du denkst, dass sie nicht verwendet wird) in dieser/n Liste/n. Wirst du fündig, dann ist sie ungenutzt, wirst du nicht fündig, dann ist sie irgendwo im Einsatz ... zu wissen, dass sie im Einsatz ist (und nicht nur Kunst) müsste ja soweit ausreichen, dass du dann wiederum über die Devtools (Chrome » Coverage) heraus findest, wo sie denn im Einsatz ist.

Doch einzeln Anweisungen aus einem CSS-file rauszulesen und dabei erkennen, ob sie augenscheinlich da auch hin gehört ... mmmh klingt für mich nach Sisyphus

[Zille]

Wirst du fündig, dann ist sie ungenutzt, wirst du nicht fündig, dann ist sie irgendwo im Einsatz … müsste ja soweit ausreichen …

So war es von mir gedacht. Dann aber hat mir mlweb in #6 aufgezeigt, was bei (wie von mir eingesetzten) Themes passiert. Uns so zeigt https://www.jitbit.com/unusedcss/ dann auch "nur" 498 ungenutzte Anweisungen. Die in eine Tabelle kopieren und dort ordnen lässt mich schon sehr viel schneller fündig werden.

Die Sinnhaftigkeit, eine einzelne Anweisung "color:red;" ausfindig und löschen zu wollen erscheint nunmehr zweifelhaft zu sein. Meine ursprüngliche Idee war wohl ein wenig blauäugig … na ja, wieder etwas gelernt. Danke.

[Enrica_r]

Ich glaube, dass fast niemand mehr den Überblick von nicht gebrauchten CSS in seinem Projekt hat. Dies vor allem dann, wenn man Frameworks wie Boostrap, ZURB Foundation oder noch schlimmer Tailwind. In der Nutzerfreundlichkeit ist gerade Tailwind stark. Deshalb wird dieses CSS Framework oft in Laravel oder Vue Projekten eingesetzt. Es generiert aber viele - oft unbenutzte - Kombinationen von Klassen.

Beim Einsatz von Sass oder PostCSS (Tailwind) kommen dann oft noch Tools wie PurifyCSS oder PurgeCSS hinzu. Diese scannen die View Files (html, php, vue etc.) bei jedem Erstellen der CSS (nur für Produktion geeignet) und generieren, dann ein "gesäubertes" CSS File. Bei Problemen kann man auch eine "Ignore-list" hinterlegen, damit diese nicht entfernt werden.

Im Gegensatz zu Sass oder Less lässt sich eine solche Bibliothek mit Conato nicht benutzen, da die Klasssen oft nicht nur in den Templates sondern auch in der Datenbank gespeichert sein. Idealerweise könnte Contao auf Befehl einen temporären Ordner anlegen und sämtliche Seiten dort als html ablegen. Dann PurgeCss starten und die CSS Dateien in Assets ablegen. Danach den Ordner wieder löschen. Nur so würde man den grössten Teil der notwendigen CSS finden.