Abstraktion mit CSS erstellen [geschlossen]
Ich bin mir nicht wirklich sicher, ob es der korrekte Titel ist, wenn nicht, dann zögern Sie nicht, ihn zu ändern. Ich bin kein englischer Muttersprachler, also werde ich mein Bestes versuchen, um mit Hilfe eines Bildes zu erklären:
Nehmen wir an, dass ich eine einfache HTML-Datei habe. Diese Datei verwendet Schaltflächen und verwendet eine UI-Bibliothek (wie Yahoo Pure). Aber anstatt Klassen von Pure zu verwenden, verwende ich meine eigenen Klassen, nennen wir sie myButton , die wiederum Pure CSS (oder jedes andere) verwenden. Aber wie ?
Hier versuche ich eine Abstraktionsschicht zu erstellen, so dass meine CSS-Datei verschiedene UI-Bibliotheken (egal ob bootstrap, pure oder foundation) & amp; Der Code würde immer noch funktionieren.
Ohne diese Lösung würde ich so verfahren (mein ursprünglicher Code wäre):
%Vor%Dann, wenn ich meine Veränderung des Herzens habe und beschließe Bootstrap zu benutzen:
%Vor%Also muss ich hier zwei Änderungen vornehmen, eine ist Source-CSS-Datei (kein großes Problem) und Klasse für Button (ein sehr großes Problem, wenn der Code groß ist). (Stellen Sie sich die Änderungen vor, die ich machen muss, wenn ich Gitter und andere Materialien verwende)
Was ist, wenn ich so etwas tun kann?
%Vor% Wenn ich also von Bootstrap zu Pure wechseln möchte, mache ich nur Änderungen in my-magic-stylesheet.css & amp; es sollte noch funktionieren. Meine HTML-Datei bezieht sich auf my-magic-stylesheet.css und my-magic-stylesheet.css kann sich auf jede von mir angegebene Bibliothek beziehen.
Eine Lösung, die mir in den Sinn kommt, ist, das ist ganz einfach, ich schreibe ein Python-Skript. Zuerst notiere ich verschiedene Klassen und ihre jeweilige UI-Bibliothek. Dann schreibe ich ein CSS, in dem ich generische Klassennamen wie myButton verwenden werde. Dann füttere ich diese CSS zu meinem Skript mit dem Namen der UI-Bibliothek als eine andere Eingabe. Das Skript wird durch die CSS-Datei & amp; Nehmen Sie entsprechende Änderungen vor. (Wie zB myButton zu btn ändern, wenn eine andere Eingabe für das Skript bootstrap ist)
Aber gibt es einen besseren Ansatz dafür? Kann ohne Python-Skript sein? Oder irgendeine Lösung, die dir in den Sinn kommt? Ich bin auch neu in CSS-Tools wie LESS / SASS. Kann ich sie trotzdem benutzen, um mein Problem zu lösen?
2 Antworten
Hm ... interessante Frage. Ich denke, dass Sie einen sehr wichtigen Punkt verpasst haben. Wenn Sie von einem Framework zu einem Framework springen, ändern Sie nicht nur die Namen der Klassen, sondern auch Ihr HTML-Markup. Also, selbst wenn Sie eine gute Lösung für btn gefälltes Problem finden, finden Sie möglicherweise kein Problem für die Rasterdefinition. I.e. bootstrap benötigt möglicherweise zwei neue div -Tag-Wrapper. Also, ich denke, dass der beste Ansatz in Ihrem Fall ist, alles zu modulieren. I.e. Erstellen Sie verschiedene Anzahl von Komponenten. Jede Komponente hat drei (oder die Anzahl der benötigten Frameworks) Vorlagen. Ich meine, in deinem Fall sieht das HTML-Markup wichtiger aus als das CSS selbst. Am Ende müssen Sie die Framework-Bibliothek ganz oben importieren und die richtige Vorlage verwenden. Sie müssen sich nicht mit CSS-Klassenüberschreibungen oder ähnlichem beschäftigen. Es ist eine Hölle, wenn du dorthin gehst.
Tags und Links html css html5 css3 twitter-bootstrap