CSS vereinfachen Webseite/Programm

htcs · #1 (**permalink**) 07.11.2019, 01:43

Hallo Leute,

gibts es Programme / Webseiten, die CSS vereinfachen zusammenfassen.

Ich habe da welche die sind Kraut und Rüben und man sieht schon auf Anhieb ein paar Sachen die man zusammenfassen könnte, ist aber noch viel mehr.

Ich habe bis jetzt nur Webseiten gefunden, die ungenutzte Styles entfernen.

cloned · #2 (**permalink**) 07.11.2019, 10:23

Nicht dass ich wüsste.
Ist auch schwer zum zusammenfassen da man ja nicht weiß, was wie zusammenhängt.

Code:

.el1 {
font-size: 12px;
}

.el3.el2 {
  font-size: 14px;
}

.el1.el2 {
font-size: 12px;
}

<p class="el1 el2 el3"> Text </div>

Hier kannst du die beiden regeln für font-size: 12px nicht einfach zusammenfassen da sonst das endergebnis verändert wird wenn die Reihenfolge nicht angepasst wird. Und wenn die Reihenfolge angepasst wird, wer weiß ob das nicht woanders zu falschen Auswirkungen führt?

Besser ist es, den bestehenden Code entweder zu refactoren oder falls das zu aufwändig ist, ihn als technical debt zu beahndeln und dafür neuen Code "besser" zu schreiben.

htcs · #3 (**permalink**) 07.11.2019, 12:43

Meinst Du nicht, dass ein Programm das zusammenfassen könnte:

Code:

row {
  margin-top: 0;
  margin-bottom: 0;
}

.row:before,.row:after {
  content: " ";
  display: table
}

.row:after {
  clear: both
}

.row .row { /* kann weg */
  margin-top: 0;
  margin-bottom: 0;
}

.row .row:before,.row .row:after { /*kann weg*/
  content: " ";
  display: table
}

.row .row:after { /*kann weg*/
  clear: both
}

auch wenn das etwas versteckt ist:

Code:

row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 61.25rem
}

.row:before,.row:after {
  content: " ";
  display: table
}

.row:after {
  clear: both
}

.row.collapse>.column {
  padding-left: 0;
  padding-right: 0
}

.row .row {
  width: auto;
  margin-left: -0.625rem;
  margin-right: -0.625rem;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none
}

.row .row:before,.row .row:after {
  content: " ";
  display: table
}

.row .row:after {
  clear: both
}

protonenbeschleuniger · #4 (**permalink**) 07.11.2019, 17:17

Nach welcher Logik sollte ein Programm da vorgehen?

htcs · #5 (**permalink**) 07.11.2019, 20:08

Wenn ein Attribut für .row definiert ist, ist es da nicht überflüssig,

das gleiche für .row .row nochmal hinzuschreiben, weil sowieso schon gilt?

Sailor56 · #6 (**permalink**) 07.11.2019, 21:58

Da solltest du dich noch mal etwas näher mit CSS Selektoren beschäftigen!
Mit .row und .row .row werden 2 unterschiedliche Elemente angesprochen.
Mit .row alle die die Klasse row haben.
Mit .row .row alle die mit Klasse .row, die Kindelement von einem Element mit Klasse row sind.

htcs · #7 (**permalink**) 07.11.2019, 22:06

Und wenn was für .row schon definiert ist, dann ist es nicht überflüssig das gleiche nochmal für .row mit noch zusätzlicher Bedingung?

Sailor56 · #8 (**permalink**) 08.11.2019, 06:29

https://jsfiddle.net/1adtLe06/

protonenbeschleuniger · #9 (**permalink**) 08.11.2019, 07:27

Wie gesagt es geht um Logik. Ein Programm kann nicht ahnen was du meinst oder Thesen aufstellen was du für überflüssig hälst. Es kann immer nur klar definierten Regeln folgen und die müssen einer einfachen definierten Logik folgen.

Diese ist schon für uns nicht erkennbar.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39