Anwendung der CSS-Regelkaskade Mehrere Punkte, die beim CSS_Experience-Austausch beachtet werden müssen

Theoretische Grundlagen sind notwendig, und Übung ist der Weg, die Theorie zu verbessern und zu verstehen. Beides ist gleichermaßen wichtig. Jeder Designer und Entwickler, der das Gleichgewicht verlässt, egal welche Seite er bevorzugt, wird entweder links oder rechts Fehler machen . Aber was ist der praktische Nutzen dieser Methode, über die ich spreche? Offensichtlich kann es weder ein abgerundetes Rechteck für uns erstellen noch ein Spaltenlayout für uns erstellen, noch kann es uns eine Navigationsleiste geben, die am Kopf des Dokuments fixiert ist. Die praktische Anwendung dieses Algorithmus liegt in: Guten CSS-Programmierpraktiken. Dies ist eine Makropraxis, die genauso wichtig ist wie die Mikroübungen, die ich gerade erwähnt habe, aber viel schwieriger zu meistern ist.

Dieser Artikel soll nicht alle guten CSS-Programmierspezifikationen enthalten, und es ist auch nicht möglich, eine Zusammenfassung meiner persönlichen Spezifikationen zum Schreiben von CSS bereitzustellen Funktionsweise von CSS.

Verwenden Sie kein Inline-CSS
Der Benutzerstil unterliegt nicht Ihrer Kontrolle
Verwenden Sie keine wichtigen Regeln
Schreiben Sie CSS je nach Spezifität von niedrig nach hoch
Die ersten drei Punkte stehen nicht im Mittelpunkt dessen, worüber ich spreche, ich werde darüber hinweggehen.

Die Besonderheit von Inline-CSS ist am größten. Wenn die Attribute in Ihrer CSS-Datei mit Inline-CSS in Konflikt stehen, sind die Attribute in Ihrer CSS-Datei ungültig. Dies unterscheidet sich von unserer Gewohnheit, Stile nur in CSS zu debuggen Dateien. Stimmt nicht überein. Inline-CSS ist auch hässlich, es fügt Stile in das HTML-Dokument ein, daher sollte es aufgegeben werden.

Wenn der Benutzer den Benutzerstil auf „wichtig“ setzt, kann die wichtige Anweisung des Benutzers nicht überschrieben werden, unabhängig davon, wie Sie CSS-Regeln schreiben, sodass der Versuch, alle Benutzerstile zu überschreiben, sinnlos ist. Glücklicherweise müssen wir darüber nicht mehr nachdenken.

Die wichtige Regel entspricht nicht unserer üblichen Denkweise. Unabhängig davon, wie wir die Spezifität und Reihenfolge der CSS-Regeln erhöhen, überschreibt die wichtige Regel die mit ihr konkurrierenden Regeln wird auch stören Die üblichen Regeln der CSS-Regeln führen zu Problemen beim Debuggen. Wenn Sie die wichtige Regel zum Hacken des Browsers verwenden möchten, sollten Sie die Regel in einem Selektor anwenden, der auf ein eindeutiges Element verweist. (PS. Hack sollte als letztes in der Lösung berücksichtigt werden, da er zu hässlich ist.)

Letzter Punkt: Wie schreibt man CSS je nach Spezifität von niedrig nach hoch?

Der Schlüssel ist modulares CSS.

Globales CSS hinzufügen
Einheitliches CSS für die aktuelle Seite hinzufügen
Seite in mehrere Module aufteilen
ID-Hooks für jedes unterschiedliche Modul und Klassen-Hooks für dasselbe Modul verwenden
Jedes hinzufügen Modul Einheitliches CSS für jedes Modul
Teilen Sie jedes Modul in mehrere Untermodule auf und kehren Sie zu Schritt 4 zurück, um mit der Schleife zu beginnen, bis das Hinzufügen des Stils abgeschlossen ist.
Gutes CSS zu schreiben ist ein Designproblem, kein Implementierungsproblem. Wir sollten zunächst globale CSS-Inhalte mit sehr geringer Spezifität schreiben, bei denen es sich um unser häufig verwendetes reset.css handelt. Es ist der Standardstil für alle Seiten unserer Website.

Wenn eine Seite einen einzigartigen einheitlichen Stil hat, beispielsweise eine Seite mit einem anderen Hintergrund als andere Seiten, können wir einer Seite eine ID hinzufügen und dann das einheitliche CSS der aktuellen Seite unter die ID schreiben.

body#special{ 
    background-color:black; 
}

Nachdem der einheitliche Stil geschrieben wurde, teilen wir die Seite in mehrere Module auf. Wenn diese Module grundsätzlich den gleichen Stil haben, verwenden wir Klassen-Hooks Gleiches gilt, dann verwenden Sie den ID-Hook. Dieses Prinzip sollte in Zukunft bei der Aufteilung in Module jedes Mal befolgt werden, da die Spezifität der Klasse nicht hoch ist. Wenn es sich also nicht um ein Modul handelt, das offensichtlich ähnlich aussieht, sollte die Klasse nicht verwendet werden. Der Name der ID kann normalerweise als Name des Moduls verwendet werden. Wie Kopf, Po usw. Der ID-Selektor spielt eine Schlüsselrolle bei der Kaskadierung, da die ID exklusiv ist und eine hohe Spezifität aufweist, wodurch verhindert werden kann, dass CSS-Regeln versehentlich überschrieben werden.

In einem bestimmten Modul haben wir möglicherweise ein einheitliches CSS. Dann müssen wir den ID-Selektor verwenden, um den einheitlichen Stil unter dem aktuellen Modul zu schreiben.

#head p{ 
    color:red; 
}

Beim Hinzufügen eines Klassen-Hooks empfehle ich, die ID des übergeordneten Moduls (oder der Seite selbst) als ersten Teil des Klassennamens zu verwenden. Wenn ich eine unabhängige Seite hinzufüge (body#special), dann sollte ich nach der Aufteilung des Moduls in ein Modul für die Seite das Modul der Seite „special_head“, „special_bottom“ usw. nennen.

Oder wenn Sie Klassen-Hooks in einigen Seitenmodulen verwenden, sollten Sie head_col usw. verwenden. Dies hat den Vorteil, dass wir

#head .col{ 
    /* 头部中每一列的样式 */ 
}

nicht verwenden müssen, sondern

.head_col{ 
    /* 头部中每一列的样式 */ 
}

direkt verwenden können, sodass wir es nicht tun Sie müssen sich keine Gedanken über Namenskonflikte machen.

Für Elemente mit direkt unter dem Modul hinzugefügtem ID-Selektor können wir den Selektor direkt verwenden und die ID des übergeordneten Moduls vor seinem Namen hinzufügen.

#head_navigator{ 
    /* 头部中导航栏的样式 */ 
}

要做到模块化CSS我们应当尽量防止跨模块的CSS出现，我想一条好的原则是：如果某一样式的跨模块特性不是你一目了然的，那么就不要使用跨模块的CSS。一个例外是全局CSS或者模块内的统一CSS。而对于那些并非一目了然的，并非具有统一样式的，建议在每个子模块下分别定义。这就像是编写Java程序中的面向对象的设计一样，我们要降低模块之间的互相依赖，使得相同模块的CSS规则在一起，略有不同的就完全分开，这样不但易于维护，还能够保证特殊性从低到高地编写CSS，从而防止CSS规则被意外的覆盖

以上就是CSS规则层叠的应用 css必须要注意的几点_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！