Seitenspezifische css-Regeln - wo soll man sie aufstellen?

Oft, wenn ich eine Website entwerfe, muss ich einen bestimmten Stil auf ein bestimmtes Element auf einer Seite anwenden, und ich bin absolut sicher, dass er immer nur für dieses Element auf dieser Seite gelten wird (z. B. eine absolut positionierte Schaltfläche oder so). Ich möchte nicht auf Inline-Stile zurückgreifen, da ich dazu neige, mit der Philosophie übereinzustimmen, dass Stile von Markup getrennt gehalten werden, also befinde ich mich intern, wo ich die Stildefinition setzen soll.

Ich hasse es, eine bestimmte Klasse oder ID in meiner Basis-CSs-Datei für ein einmaliges Anwendungsszenario zu definieren, und ich fürchte die Idee, seitenspezifische .css-Dateien zu erstellen. Für die aktuelle Website, an der ich arbeite, erwäge ich, die Stildefinition oben auf der Seite in das Kopfelement zu setzen. Was würden Sie tun?

Antwort auf "Seitenspezifische css-Regeln - wo soll man sie aufstellen? " 11 von antworten

Ich würde sie in einem <style /> tag at the top of the page. Tag oben auf der Seite setzen.

Für diese Situation denke ich, dass es wahrscheinlich die beste Lösung ist, die seitenspezifischen Stilinformationen in die Kopfzeile zu setzen. Die Verschmutzung Ihres websiteweiten Stylesheets scheint falsch zu sein, und ich stimme Ihrer Ansicht zu Inline-Stilen.

In diesem Fall stelle ich es in der Regel oben auf der Seite. Ich habe ein Seitendefinitionsframework in PHP, das ich verwende, das lokale Variablen für jede Seite enthält, von denen eine seitenspezifische CSS-Stile ist.

Schauen Sie, ob es eine Kombination von Klassen gibt, die Ihnen das gewünschte Ergebnis geben würde. Sie können auch erwägen, das CSS für dieses eine Element in einige Klassen aufzuteilen, die für andere Elemente wiederverwendet werden könnten. Dies würde dazu beitragen, das CSS zu minimieren, das für Ihre Website als Ganzes erforderlich ist.

Ich würde versuchen, seitenspezifische CSS an der Spitze der HTML-Dateien zu vermeiden, da das ihre CSS fragmentiert lässt, falls Sie das Aussehen der Website ändern möchten.

Für CSS, die wirklich, wirklich, nie auf irgendetwas anderes verwendet werden, würde ich immer noch eine #id rule in the site-wide CSS. Regel in die standortweite CSS setzen.

Da das CSS aus einer anderen Datei verknüpft ist, ermöglicht es den Browsern, diese Datei zwischenzuspeichern, was Ihre Serverbandbreite (sehr) für zukünftige Lasten leicht reduziert.

Setzen Sie es an die Stelle, die Sie suchen würden, wenn Sie wissen wollten, wo der Stil definiert wurde.

Für mich ist das genau der gleiche Ort, an dem ich Stile platzieren würde, die 2-mal, 5- oder 170-mal verwendet wurden - ich sehe keinen Grund, Stile aus dem Hauptstylesheet(s) basierend auf der Anzahl der Verwendungen auszuschließen.

Ich denke, Sie sollten den Denkprozess auf jeden Fall erweitern, um einige Zweifel für "seitenspezifische css" aufzunehmen. Dies sollte eine sehr, sehr seltene Sache sein. Ich würde sagen, gehen Sie für die globalen Stylesheets sowieso, aber regestalten Sie Ihre css / html in einer Weise, dass Seiten nicht super-spezifisches Styling haben müssen. Und wenn es am Ende ein paar Zeilen seitenspezifischer Markups in der globalen css gibt, wen interessiert. Es ist besser, es an einem konsistenten Ort sowieso zu haben.

Es lohnt sich nicht, eine seitenspezifische CSS-Datei für ein oder zwei bestimmte Regeln zu laden. Ich würde es in Tags in den Kopf des Dokuments legen. Was ich in der Regel tue, ist, meine websiteweite CSS-Datei zu haben und dann Kommentare zu verwenden, sie basierend auf den Seiten zu durchforsten und dort bestimmte Regeln anzuwenden.

Das Definieren des Stils auf der konsumierenden Seite oder das Inlineieren Ihres Stils sind zwei Seiten derselben Münze - in beiden Fällen verwenden Sie Seitenbandbreite, um den Stil dort zu erhalten. Ich glaube nicht, dass das eine unbedingt besser ist als das andere.

Ich würde dafür eintreten, einen #Selector dafür in Ihrem websiteweiten Haupt-Stylesheet zu machen. Die Verschmutzung ist minimal und wenn Sie wirklich so viele wirklich einzigartige Fälle haben, möchten Sie vielleicht überdenken, wie Sie Ihre Websites markieren.

Wie Sie wissen, sind Stylesheet-Dateien statische Dateien und zwischengespeichert auf Client. Auch können sie durch Webserver komprimiert werden. Es ist also meine Wahl, sie in eine externe Datei zu legen.

Ich würde eine ID für eine Seite wie

<body id="specific-page"> or <html id="specific-page">

festlegen und css Override-Mechanismus in der sitewide css-Datei verwenden.

  • <style>-Element oben auf der Seite. Dies ist etwas besser als style=, da es das Markup sauber hält, aber Bandbreite verschwendet und es schwieriger macht, umfassende CSS-Änderungen vorzunehmen, da Sie sich die Stylesheets nicht ansehen können und wissen, welche Regeln vorhanden sind.
  • page-specifc css: Mit dieser Option können Sie die saubere HAUPT-CSS-Datei und haben. Es bedeutet jedoch, dass Ihr Client viele kleine CSS-Dateien herunterladen muss, was die Bandbreite und die Latenz beim Laden von Seiten erhöht. Es ist jedoch sehr einfach zu warten.
  • ein großes websiteweites CSS: Der Hauptvorteil einer großen Datei ist, dass es nur eine Sache zum Herunterladen ist. Dies ist viel effizienter in Bezug auf Bandbreite und Latenz.

Wenn Sie eine serverseitige Programmierung im Gange haben, können Sie möglicherweise einfach mehrere Blätter aus #3 dynamisch kombinieren, um die Wirkung von #4 zu erzielen.

Ich würde eine große Datei empfehlen, ob Sie sie tatsächlich als eine Datei verwalten oder die Datei durch einen Buildprozess oder dynamisch auf dem Server generieren. Sie können Ihre Selektoren mithilfe von seitenspezifischen IDs angeben (immer eine einschließen, nur für den Fall).

Was die answer that was accepted when I wrote this, I disagree with finding a "combination of classes that gives you the result you want". This sounds to me like the classes are identifying a visual style instead of a logical concept. Your classes should be something like "titlebox" and not "red". Then if you need to change the text colour on the user info page, you can say betrifft, bin ich nicht damit einverstanden, eine "Kombination von Klassen zu finden, die dir das gewünschte Ergebnis gibt". Das klingt für mich so, als ob die Klassen einen visuellen Stil anstelle eines logischen Konzepts identifizieren. Ihre Klassen sollten so etwas wie "titlebox" und nicht "rot" sein. Wenn Sie dann die Textfarbe auf der Benutzerinfoseite ändern müssen, können Sie sagen,

#userInfoPage .titlebox h1 { color : red; }

Beginnen Sie nicht mit der Anwendung von Klassen überall, da eine Klasse derzeit ein bestimmtes Erscheinungsbild hat, das Sie möchten. Sie sollten allgemeine Konzepte in Ihre Seite einfügen, die durch HTML mit Klassen dargestellt werden, und diese Konzepte dann formatieren und nicht umgekehrt.

Es gibt vier grundlegende Fälle:

  1. style= attribut. Dies ist am wenigsten verwaltbar, aber am einfachsten zu codieren. Ich persönlich betrachte die Verwendung von style= als Fehler.