Bestehende CSS-Ersetzung (Re-Skinning) von Websites ohne Änderung des HTML

Question

Ich kann eine Reihe von anderen guten Antworten auf Fragen im Zusammenhang mit CSS Best-Practices auf Stack Overflow zu sehen:

• Wie man die CSS-Explosion bewältigt
• CSS-Konventionen / Code-Layout-Modelle
• Gibt es irgendwelche CSS-Standards, die ich beim Schreiben meines ersten Stylesheets beachten sollte?
• Was ist die beste Methode, um CSS aufzuräumen?
• Bewährte Praktiken - CSS-Stylesheet-Formatierung

Aber ich glaube, ich habe ein anderes Problem.

Ich versuche, eine bestehende Website umzugestalten, die sehr schön mit div und ul usw., und es hat eine gute bestehende CSS-Datei, aber wenn ich anfange, Änderungen an der CSS-Datei vorzunehmen, stelle ich schnell fest, dass ich das Layout kaputt mache. Ich habe das Gefühl, dass es sehr schwer ist, ein Gefühl dafür zu bekommen, wie alle CSS zusammenarbeiten und welche CSS sich auf übergeordnete und geschwisterliche Elemente im HTML auswirken.

Meine Frage lautet also: "Was sind die besten Praktiken, um eine bestehende Website neu zu gestalten, indem man nur das CSS ersetzt und den bestehenden HTML-Code nicht verändert?" Ich kann die Klassen, IDs, Knotenhierarchie usw. nicht ändern.

Ein Beispiel für eine bestimmte Website, die ich neu gestalten möchte, ist http://demo.nopcommerce.com/ .

Das vorhandene CSS kann so kompliziert und detailliert sein wie dieser Auszug aus der Haupt-CSS-Datei:

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

Für jede Hilfe wären wir dankbar.

Answer 1

Wenn ich dies tun würde, würde ich WebKit's DOM-Inspektor ausgiebig nutzen (verfügbar in Safari oder Chrome durch Rechtsklick auf eine Seite und Auswahl von Inspect Element). Ich erwarte, dass es eine Menge mit sowohl wickeln Sie Ihren Geist um die Knoten/Klasse/id-Struktur helfen würde, sowie helfen, die neue css zu debuggen, wie Sie es schreiben.

Es ist viel bequemer, als sich nur die Quelle anzusehen, da sie in der Baumansicht angezeigt wird und die Knoten standardmäßig eingeklappt sind. Und es hat einige sehr nützliche Funktionen für die Inspektion der Metriken (Breite/Höhe/Padding/Rahmen/Rand) von Knoten, sowie zeigen, welche Stil gilt für sie, in welcher Reihenfolge, und die endgültige Stil verwendet wird.

Answer 2

Ich würde vorschlagen, die Firebug Plug-in für Firefox. Damit können Sie eine Vorschau der CSS-Änderungen anzeigen, indem Sie das vorhandene CSS bearbeiten, während Sie die Seite im Browser anzeigen, ohne die CSS-Datei dauerhaft zu ändern. Sie erhalten auch eine Vorstellung von der "Kaskade" der Stile usw.

Ein sehr praktisches Werkzeug auch für das Debugging von Javascript.

Answer 3

Crimson_penguin und Jon P. haben beide gute Tools vorgeschlagen, also werde ich Ihnen ein paar allgemeine Ratschläge geben.

In Ihrer Situation würde ich wie folgt vorgehen, auch wenn es keineswegs DIE Lösung ist.

Zuallererst sollten Sie wissen, wie das Endprodukt aussehen soll. Fertigen Sie einen Entwurf an, damit Sie von Anfang an wissen, wo Sie am Ende stehen wollen. Sparen Sie auch nicht an Details: "Je mehr Sie im Training schwitzen, desto weniger bluten Sie im Kampf".

Zweitens: Machen Sie sich mit dem aktuellen CSS vertraut, denn Sie werden es bald sehr gut kennenlernen. Ordnen Sie alles neu an, wenn Sie es für nötig halten, z. B. indem Sie Dinge gruppieren, die auf bestimmte Hierarchien wirken.

Zum Beispiel:

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

Sobald Sie einen Entwurf haben und den aktuellen Code kennen, können Sie einige Änderungen vornehmen. Beginnen Sie zunächst mit einfachen, unauffälligen Elementen wie einem Textblock oder einem Bild. Dann können Sie um diese herum aufbauen. Wie die beiden Vorposter bereits erwähnt haben, können Firebug (für Firefox) und der DOM-Inspector (für Safari/Chrome) sehr hilfreich sein, da Sie Dinge auf der Seite ausprobieren können, ohne sich auf etwas festzulegen, bis Sie gesehen haben, wie es aussieht.

Es ist ein langwieriger und potenziell stressiger Prozess, aber mit etwas Geduld und Ausdauer werden Sie das Ziel in kürzester Zeit erreichen.

Answer 4

Wir sind gerade dabei, ein umfangreiches Reskinning bei meiner Arbeit durchzuführen - etwa 13000 JSP-Seiten, wobei die Anwendung über 1,5 Millionen Codezeilen umfasst.

Bei unserem ersten Planungstreffen habe ich mich kaputtgelacht, weil die meisten davon ausgingen, dass wir jede Seite manuell überarbeiten würden. Ein manuelles Refactoring wäre das Allerletzte, was ich in Erwägung ziehen würde - es ist die teuerste Methode, die den geringsten Nutzen bringt. Man erhält eine Version der Software, die das Reskinning nicht einfacher macht und die man bis zum Ende der Zeit parallel pflegen muss. Mit anderen Worten: Sie bekommen eine Belastung.

Wie auch immer, ich schlage vor, ein Dienstprogramm zu erstellen oder zu finden, das die HTML-Ausgabe der JSP-Seiten scannt, so dass es das tatsächliche endgültige CSS erfassen kann, das für jedes Element verwendet wird. Dadurch müssen wir nicht unseren eigenen CSS-Parser schreiben, der die Regeln der CSS-Selektoren usw. nachahmt. Stattdessen erhalten wir die vollständige endgültige Liste aller CSS-Werte für jedes Element und schreiben diese Informationen in eine Reihe von Datenbanktabellen. Von dort aus können wir das CSS auf Gemeinsamkeiten hin analysieren, die wir dann als gemeinsame Klassen oder Mixins (mit SASS) ausschreiben können, und den Rest als elementspezifische Klassen, die diese gemeinsamen Definitionen verwenden, ausschreiben.

Nachdem das gesamte CSS ausgegeben wurde, schreibt das Tool die JSP-Dateien mit den entsprechenden CSS-Klassen für jedes Element neu.

Es ist anzumerken, dass es nur sehr wenige Gemeinsamkeiten zwischen den fraglichen Seiten gibt. Ich denke, dass wir mit der Feinabstimmung des Tools über mehrere Iterationen vielleicht zu dem Punkt gelangen können, an dem wir bestimmte Teile einer Seite als zu einer Reihe von Komponenten auf Seitenebene gehörend identifizieren können, wie z. B. Panels, Feldgruppen, Container usw. Wenn wir diese Elemente auf jeder Seite identifizieren können, können wir schließlich tatsächliche wiederverwendbare Komponenten anstelle des bestehenden HTML einfügen.

Ich denke, dies ist wahrscheinlich der einzige gültige Ansatz, der eine Chance hat, die Seiten mit einem gewissen Maß an Vertrauen zu konvertieren, dass nichts kaputt geht. Wir würden die Strukturen der HTML-Elemente überhaupt nicht ändern, so dass die Ausgabe des Tools zunächst genau so aussehen sollte, wie sie es derzeit tut, aber mit der vorhandenen Struktur, die es uns ermöglichen wird, Änderungen am Erscheinungsbild der gesamten Anwendung mit Ein-Punkt-Bearbeitungen an den richtigen Klassen usw. vorzunehmen.

Zu diesem Zweck habe ich bereits ein Tool ausfindig gemacht, das genau das tun kann, was ich hier beschreibe - es stammt von LinkedIn und heißt CSS-Blöcke . Sie erwähnen ein weiteres Tool zur Optimierung von CSS namens OptiCSS (klingt wie "Optik"), aber anscheinend ist es noch nicht ganz bereit für die Prime Time.

Wie auch immer, ich hoffe, dass einiges davon Sinn macht und nützlich ist. Fühlen Sie sich frei, mir eine E-Mail mit Fragen oder Kommentaren zu schicken.