Der HTML5-Ansatz für schnelles CSS-Prototyping
oder: <style>Tags sind nicht mehr nur für den Kopf!
CSS hacken
Angenommen, Sie debuggen und möchten Ihre Seiten-CSS ändern, damit ein bestimmter Abschnitt nur besser aussieht. Anstatt Ihre Stile schnell, schmutzig und nicht wartbar inline zu erstellen, können Sie das tun, was ich heutzutage tue, und einen abgestuften Ansatz verfolgen.
Kein Inline-Stilattribut
Erstellen Sie niemals Ihre CSS-Inline, womit ich meine: <element style='color:red'>oder sogar<img style='float:right'> Es ist sehr praktisch, spiegelt aber später nicht die tatsächliche Selektorspezifität in einer echten CSS-Datei wider. Wenn Sie es behalten, werden Sie die Wartungslast später bereuen.
Prototyp mit <style>stattdessen
Wo Sie Inline-CSS verwendet hätten, verwenden Sie stattdessen In-Page- <style> Elemente. Probieren Sie das aus! Es funktioniert in allen Browsern einwandfrei, eignet sich also hervorragend zum Testen und ermöglicht es Ihnen, solche CSS-Dateien ordnungsgemäß in Ihre globalen CSS-Dateien zu verschieben, wann immer Sie möchten / müssen! (* Beachten Sie nur, dass die Selektoren nur eine Spezifität auf Seitenebene anstelle einer Spezifität auf Site-Ebene aufweisen. Seien Sie also vorsichtig, wenn Sie zu allgemein sind.) Genauso sauber wie in Ihren CSS-Dateien:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Refactoring des Inline-CSS anderer Leute
Manchmal sind Sie nicht einmal das Problem, und Sie haben es mit dem Inline-CSS eines anderen zu tun, und Sie müssen es umgestalten. Dies ist eine weitere großartige Verwendung für die<style> In-Seite, sodass Sie das Inline-CSS direkt entfernen und sofort während des Refactorings direkt in Klassen, IDs oder Selektoren auf der Seite platzieren können. Wenn Sie mit Ihren Selektoren vorsichtig genug sind, können Sie das Endergebnis mit nur einem Kopieren und Einfügen in die globale CSS-Datei am Ende verschieben.
Es ist ein wenig schwierig, jedes CSS-Bit sofort in die globale CSS-Datei zu übertragen, aber mit In-Page- <style>Elementen haben wir jetzt Alternativen.