Ich habe einige Stylesheets aus verschiedenen Quellen in meinem Webprojekt. Ich möchte sie harmonisieren. Einige Stile, die ich von der einen, einige von der anderen brauche. Gibt es ein Werkzeug oder eine Methode, um Stilkonflikte systematisch aufzulösen? Ich habe IE8 Entwickler-Tool versucht, und ja, es ist möglich, Konflikte auf der Ebene jedes Elements anzuzeigen. Aber ich habe viele Elemente, also wenn ich es elementweise mache, denke ich, dass das zu lange dauert. Theoretisch könnte es ein Werkzeug geben, das Konflikte von zwei CSS-Dateien zur Entwurfszeit zeigt?!? Ich denke, das würde mir viel Zeit sparen.Konfliktlösende Stile in CSS systematisch lösen
Antwort
Haben Sie diese Firefox-Erweiterung ausprobiert? https://addons.mozilla.org/en-US/firefox/addon/5392 Es erleichtert das Entfernen überflüssiger Stile.
Sonst würde ich wahrscheinlich alle Stile in eine Datei kopieren und versuchen, ähnliche Regeln zu gruppieren, und dann mit Dust-Me die unbenutzten entfernen.
CSS hat keine Konflikte, es hat Kaskaden. Die Idee ist, dass Sie mehrere Regeln definieren können, die für die gleichen Elemente gelten und die Reihenfolge, in der Sie die Stile platzieren, eine Wichtigkeit widerspiegelt - d. H. Wenn sie zuletzt erscheint, überschreibt sie vorherige Regeln, bei denen Sie etwas als Konflikt beschreiben.
Sie sollten entweder ...
1) Entscheiden Sie, welche Stylesheet ist das wichtigste und legte es zweite
OR
2) neu schreiben Ihre Stile das Chaos
zu vermeiden MarkOR
3) wichtige Regeln wie! wICHTIG
-1 für die Erwähnung '! WICHTIG': P – Bart
Weil Sie denken, dass Menschen nicht vertraut werden können, über diese Funktion zu wissen? Du willst es geheim halten? Während die Verwendung von '! WICHTIG' abgeraten wird, weil es im Konflikt mit dem Konzept der Kaskadierungsregeln steht, sprechen wir über den spezifischen Kontext, in dem versucht wird, viele Regeln aus mehreren Quellen zusammenzubringen und'! WICHTIG' ist definitiv ein Werkzeug, das Sie berücksichtigen müssen Lage. – Fenton
Using! Wichtig normalerweise versteckt nur eine Sauerei unter dem Teppich sozusagen, und Sie am Ende mit mehr Durcheinander, die später nicht mehr unter den Teppich passen wird, aka fragen, warum css nicht eine sehr wichtige ... –
Wenn Sie die Site in FireFox anzeigen und die Firebug-Erweiterung verwenden, können Sie sich jedes Element Ihrer gerenderten Seite ansehen, und indem Sie die Registerkarte "CSS" in Firefox verwenden, können Sie die Kaskade von Stilregeln sehen werden auf dieses Element angewendet und aus welcher CSS-Quelldatei es stammt. Es zeigt Ihnen auch, welche Regeln außer Kraft gesetzt werden.
Dies ist hilfreich bei der Bestimmung, woher die jeweilige Regel kommt und was außer Kraft gesetzt wird.
Sie haben immer noch die Aufgabe, Ihre Stylesheets zu "rationalisieren", und es kann andere Tools geben, die dabei helfen können.
- 1. Meine CSS-Stile verschwinden?
- 2. CSS - Stile Konflikt
- 3. Autovervollständigung fehlt CSS-Stile
- 4. CSS-Stile einbetten?
- 5. Vererbung relativer CSS-Stile
- 6. Extrahieren Xhtml Stile zu CSS?
- 7. AutoPrefixer für CSS-Stile in Phoenix Framework
- 8. Wie CSS-Stile in Embed Widget
- 9. Dynamisches CSS-Stile in iframe mit JQuery
- 10. überschreiben css Stile mit @import funktioniert nicht
- 11. CSS-Modul schweben Stile, wenn in einem anderen Modul
- 12. Wie kann ich vererbte CSS-Stile deaktivieren?
- 13. JSF-Komponenten als Selektoren für CSS-Stile
- 14. css: nach dem Überschreiben bestehender Stile
- 15. Meine Fußzeile Link CSS-Stile funktionieren nicht
- 16. CSS-Stile nicht auf PDF mit iTextSharp
- 17. Warum Firefox fügt CSS-Stile unerwartet hinzu?
- 18. Überschreiben Sie alle CSS-Stile für Block
- 19. 2 verschiedene DataAnnotation Validierung Stile mit CSS
- 20. Warum sind meine CSS Tabellen Stile gemischt
- 21. IE verliert CSS-Stile, nachdem Tabellenzeilen mit Javascript angefügt werden
- 22. MVC jQuery UI CSS-URLs lösen nach der Bereitstellung nicht
- 23. Zugriff auf CSS-Stile für Pseudo-Klassen in JQuery?
- 24. Inline-CSS-Stile in React: Wie a: Hover?
- 25. Inline-CSS-Stile in React: Wie implementiert man Medienabfragen?
- 26. Wie CSS-Stile in app.css für Ember Js Addon hinzufügen
- 27. Wie kann ich komponentenspezifische CSS-Stile in React importieren?
- 28. Stop CSS Stile in bestimmten Abschnitten des Codes
- 29. Wie importierte CSS-Stile in GWT richtig verwenden
- 30. Holen Sie sich Text und fügen Sie in CSS-Stile
Staub mich hat mir sehr geholfen. Auch IE8 Dev-Tools. –