Key Takeaways

• Titel CSS ist eine Methodik, die die Benennung der CSS -Klasse durch die Verwendung von Akkordnamen für globale Klassen und Kleinbuchstaben für Modifikator- oder Nachkommenklassen vereinfacht. Dieser Ansatz bietet die Vorteile von BEM, ohne Klassennamen Pr?fixe oder Sonderzeichen hinzuzufügen.
• Titel CSS hilft beim Schreiben von CSS -Klassen auf natürlichere Weise und ?hnelt der schriftlichen Sprache. Es erm?glicht auch kürzere Klassennamen, die schneller eingeben und einfacher zu scannen k?nnen. Die kapitalisierten Klassen sind im Markup leicht zu erkennen und erleichtern das Verst?ndnis, was eine Nachkommenklasse für Kleinbuchstaben geh?rt.
• Ein potenzielles Problem mit dem Titel CSS entsteht, wenn ein Titelblock andere Bl?cke mit derselben Nachkommenswahlklasse enth?lt. Um Stilkonflikte zu vermeiden, kann der Kinderkombinator (>) in Titelbl?cken verwendet werden, die als Container fungieren, um sicherzustellen, dass die Stile nur für direkte Kinder gelten und nicht weiter verschachtelt sind und dieselben Klassennamen weiter verschachtelt haben.

Wenn Sie wie ich sind, verbringen Sie viel zu viel Zeit mit dem perfekten Klassennamen für ein Element. Sie k?nnen für Synonyme googeln oder sich vorstellen, was dieses Element w?re, wenn es ein reales Objekt w?re. Sie wissen, dass jeder semantische Name funktionieren wird, aber irgendwie versucht zu versuchen, sich den perfekten Namen zu überlegen, scheint es wert zu sein.

Um ehrlich zu sein, hilft der perfekte Name Ihrem Stylesheet nicht so sehr, aber die Verwendung einer CSS -Methodik k?nnte einen gro?en Unterschied machen.

Beispiele für CSS -Methoden

oocss ist umweltfreundliche Ratschl?ge, die Ihnen helfen, nachhaltige Klassen durch Recyclingstile zu schreiben.

SMACSS ist ein umfassender CSS-Spielplan, der Sie durch alle richtigen Techniken trainiert.

idiomatisches CSS ist ein analytischer Hausreiniger, der alles in Uniform für einfache Anerkennung und Seelenfrieden organisiert.

und Bem? Nun, BEM ist der Goldstandard der CSS -Klasse -Benennung, gegen die alle CSS -Klasse -Benennungsschemata gemessen werden.

Warum sollten Sie mehr über Klassen benennen?

Der BEM -Ansatz geht es darum, skalierbare CSS mit Schwerpunkt auf Lesbarkeit und Vermeidung von Kollisionen zu schreiben. Kurz gesagt, BEM steht für Block__Element -Modifier. Der Block ist ein Element, das ein kleines Stück verwandter Elemente umfasst (in SMACSS wird er als Modul bezeichnet). Das Element ist ein Nachkomme des Blocks und würde normalerweise nicht ohne die Anwesenheit des Blocks existieren. Der Modifikator steuert den Status des Blocks.

In BEM schreiben Sie einen normalen Klassennamen für den Block und für jedes Element den Blocknamen und fügen den Elementnamen hinzu.

herk?mmlicher BEM sieht so aus:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Das ist gut, weil jeder verstehen wird, dass sich ?block__eelement“ auf ?Block“ bezieht und die Klasse ?Block__Element“ kaum überall im Projekt verwendet wurde.

Aber es gibt ein Problem mit diesem Ansatz. Sie schreiben den ganzen Tag CSS und m?chten keine langen Klassennamen schreiben, die Ihr sauberes Markup verjüngen.

Titel CSS geht es darum, Ihnen die Vorteile von BEM zu geben, ohne Pr?fixe oder Sonderzeichen zu Ihren Klassennamen hinzuzufügen.

Der Trick zum Titel CSS ist einfach

Mit dem Titel CSS werden Sie Folgendes ausführen: Verwenden Sie für jede globale CSS -Klasse einen kapitalisierten Namen (Titelfall). Verwenden Sie für einen Modifikator oder eine Nachkommenklasse einen Kleinbuchstabenbuchstaben für den Beginn des Namens.

Dies bedeutet mit dem Titel CSS Sie nutzen jeden Klassennamen, auf den im Stylesheet ohne übergeordnete Klasse verwiesen wird. Dies bedeutet, dass sogar die Objekte in OOCSs aktiviert werden. Die Unterscheidung ist einfach; Alles, was im Stylesheet aktiviert wird, darf nicht erneut verwendet werden.

Hier ist ein Beispiel dafür, wie das Markup bei der Verwendung von Titel CSS aussehen würde:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Und hier ist, wie das entsprechende CSS aussehen würde:

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</span>></span>
</span><span><span><span></div</span>></span></span>

Warum Titel CSS funktioniert

Block -Kenner oder ?Titel“ -Krassen erstellen einen Umfang für alle Desc. -Klassen innerhalb des Blocks. Nachkommensklassen k?nnen in anderen Titelbl?cken ohne Style -Kollision wiederholt werden.

Dies ist nicht von entscheidender Bedeutung für die Arbeit der Methodik, aber da der HTML-Klassenname von Fall sensitiv ist, k?nnen auch ?Titel“ -Kurse als Nachkommenklassen wiederholt werden.

Wie hilft Titel CSS?

Mit der Titel -CSS -Methodik sehen Sie die folgenden Vorteile:

• CSS -Klassen auf natürliche Weise schreiben.
• CSS -Selektoren ?hneln der schriftlichen Sprache, wie englische S?tze, die mit einem Gro?buchstaben beginnen.
• kürzere Klassennamen sind schneller zu tippen und leichter zu scannen.
• Titelkofferklassen sind im Markup leicht zu erkennen. Um zu sehen, was eine Nachkommenklasse für Kleinbuchstaben geh?rt, durchqueren Sie einfach die Knoten für eine Titelklasse.

Eine Fallstrick und Problemumgehung

Titel -CSS kann Probleme haben, wenn Sie einen Titelblock verwenden, um andere Bl?cke zu enthalten. Wenn ein enthaltender Titelblock die gleiche Nachkommensauswahlklasse hat wie eine, die er umhüllt, als ein Konflikt. In diesem Fall sollten Sie Kinderkombinator in Titelbl?cken verwenden, die als Container fungieren.

Um das Problem zu demonstrieren, finden Sie unten ein Beispiel für ein Beispiel mit dem vorhandenen Problem:

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

und das dazugeh?rige CSS:

<span><span><span><div</span> class<span>="Container"</span>></span>
</span>    <span><span><span><header</span> class<span>="header"</span>></span><span><span></header</span>></span>
</span>    <span><span><span><main</span> class<span>="body"</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>    <span><span><span></main</span>></span>
</span><span><span><span></div</span>></span></span>

Beachten Sie, dass die Stile, die sich auf den .header- und .k?rperelemente innerhalb von .Container angewendet haben, auch für die anderen .header- und .k?rperelemente weiter gelten. Um dies zu vermeiden, finden Sie hier die L?sung:

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

Mit einem Selektor, der den Child Combinator (>) verwendet, gelten die Stile nur für die direkten Kinder und nicht für die weiteren verschachtelten Elemente, die die gleichen Klassennamen haben.

Ein Wort über Sass

Pre-Processoren bieten eine hervorragende M?glichkeit, Titel CSS zu schreiben. Mit der Verschachtelungsf?higkeit k?nnen Sie die Titelbl?cke im Stylesheet leicht identifizieren.

Hier ist ein Titel CSS -Beispiel in SCSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Feedback?

Wie BEM, SMACSS und OOCSS vermuten lassen, ist es wichtig, die Bl?cke oder Module klein zu halten. Es gibt Leistung und Wartbarkeitsvorteile, die nur Elemente enthalten, die eng mit der Titelklasse zusammenh?ngen.

Wenn Sie Beobachtungen oder Feedback zu Titel CSS haben, würde ich sie gerne in den Kommentaren h?ren. Und wenn Sie weitere Informationen erhalten oder zusammenarbeiten m?chten, lesen Sie unbedingt das GitHub -Repo für Titel CSS.

h?ufig gestellte Fragen (FAQs) zu CSS -Titel und Klasse -Namen

Welche Bedeutung hat die Bedeutung des CSS -Titels und der Klasse für Klasse? Es hilft bei der Organisation Ihres CSS -Codes und erleichtert das Lesen, Verst?ndnis und Aufrechterhalten. Richtige Namenskonventionen k?nnen auch die Effizienz Ihrer CSS -Selektoren verbessern und Ihre Webseiten schneller laden. Darüber hinaus hilft es bei der Zusammenarbeit, da es anderen Entwicklern ein klares Verst?ndnis des Code bietet.

Wie kann ich ein Titelattribut aus CSS hinzufügen? Sie k?nnen jedoch JavaScript oder JQuery verwenden, um einem Element ein Titelattribut dynamisch hinzuzufügen. Alternativ k?nnen Sie die CSS -Inhaltseigenschaft mit der Funktion attr () verwenden, um den Titel -Attributwert anzuzeigen, aber das Titelsattribut nicht zum Element hinzugefügt. Sie k?nnen verwendet werden, um Elemente mit bestimmten Attributen oder Attributwerten zu stylen. Beispielsweise w?hlt und style input [type = ”? text ”alle Texteingangsfelder. Es wird h?ufig als Tooltip angezeigt, wenn der Benutzer über das Element schwebt. Sie k?nnen es fast jedem HTML -Element hinzufügen. Zum Beispiel schweben

über mich

Was ist die beste Praxis für die Benennung von CSS -Klassen? Vermeiden Sie die Verwendung von Pr?sentationen oder ortsspezifischen W?rtern. Verwenden Sie stattdessen Namen, die den Zweck oder den Inhalt des Elements widerspiegeln. Verwenden Sie auch Bindestriche, um W?rter in einem Klassennamen zu trennen und die Namen so kurz wie m?glich zu halten. Es wird jedoch im Allgemeinen empfohlen, Sonderzeichen zu vermeiden, da Sie Ihren Code schwerer zu lesen und zu verstehen k?nnen.

Wie kann ich ein Element mit einem bestimmten Titelsattribut in CSS ausw?hlen? Zum Beispiel w?hlt Div [title = ”Beispiel”] alle Div -Elemente mit einem Titel -Attributwert von ?Beispiel“ aus.

Kann ich Zahlen in CSS -Klassennamen verwenden? Das erste Zeichen muss ein Buchstaben, ein Bindestrich oder ein Unterstrich sein.

Wie kann ich einem HTML -Element mehrere Klassen hinzufügen? Zum Beispiel kann ich

CSS verwenden, um das Titelattribut eines HTML -Elements zu ?ndern? Sie müssten JavaScript oder JQuery verwenden, um das Titelattribut eines HTML -Elements zu ?ndern.

Das obige ist der detaillierte Inhalt vonTitel CSS: Ein einfacher Ansatz bei der Namensschreiber -Klasse -Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!