Angenommen, Sie erstellen ein konzeptionelles Widget namens "Awesome Widget" und möchten es vollständig vor Konflikten mit umgebenden Elementen oder untergeordneten Elementen schützen, die sich als Inhalt im Widget befinden.
Was wir nicht wollen
%Vor%Lösung 1: CSS-Kindkombinator
Verwenden Sie den CSS-Unterkombinator-Selektor, um anzugeben, dass nur direkte untergeordnete Elemente ausgewählt werden sollen.
%Vor%Lösung 2: Klassennamespacing
Verwenden von aw (Awesome Widget) als Namespace für jede Klasse, verringert die Wahrscheinlichkeit anderer Elemente auf der Seite mit genau diesem Namespace + Klassennamen.
%Vor%Es gibt auch etwas wie @namespace in CSS, aber das ist nur für XML.
Gibt es neben Lösung 1 und 2 noch weitere? Welchen würdest du bevorzugen? Best Practices?
BEARBEITEN: Beispiel für ein Problem, das ohne geeignete Namespacing- / Styling-Konfliktprävention auftritt
Widget-Styling:
%Vor%Benutzer Styling:
%Vor%Auszeichnung:
%Vor%Ich würde bevorzugen, eine Kombination der beiden Lösungen zu verwenden, wie:
%Vor%Weil der zweite dem Markup eine Menge unnötigen Gewichts hinzufügt.
Für Ihr Beispiel würde ich einen Wrapper um den Benutzerinhalt mit der Klasse .user einfügen und dann ihr CSS mit .user voranstellen. Dies ist jedoch nicht anmutig, es fügt etwas Markup hinzu und ich denke, es wäre anfällig für Fehler.
XBL könnte helfen, wenn es jemals in Browsern implementiert wird, da es Möglichkeiten zum Entwerfen von Widgets gibt, die eine Weitergabe verhindern können Styling-Informationen.
Ein weiterer Vorteil ist die Performance, wenn man den Child-Kombinator mit einbezieht. Es muss nicht alle Ebenen möglicher Kinder überprüft werden, um zu bestimmen, wie gerendert wird.
Aber wenn Sie der Kürze halber Klassennamen verwenden, sollten höchstens zwei ausreichen, denke ich, es sei denn, Sie benennen nicht deutlich genug:
%Vor% Sie könnten den Nicht-Benutzer-Inhaltsbereichen auch einen Container (mit einer Namespace-Klasse) auf der höchsten möglichen Ebene geben, der den Benutzerinhalt nicht einschließt, wodurch Sie sich vor diesem Risiko schützen. <div/> ist ziemlich praktisch für diese Art von beliebiger Gruppierung und zu diesem Zweck gemacht ...
Wenn Sie viele CSS-Namespacing-Konflikte haben, ist es vielleicht an der Zeit, einen Wechsel zu einem Front-End-JS-Framework wie Facebook ReagierenJS . In Verbindung mit Webpack Module Loader können Sie so viele feine JS-Bibliotheken nutzen, die Ihren Entwicklungsworkflow optimieren. CSS-loader zum Beispiel hilft Ihnen bei der Verwaltung Ihrer CSS-Entwicklung, indem Sie lokales Scoping , das genau das ist, wonach Sie suchen.
Wenn Sie viele CSS-Namespacing-Konflikte haben, ist es vielleicht an der Zeit, einen Wechsel zu einem Front-End-JS-Framework wie Facebook ReagierenJS . In Verbindung mit Webpack Module Loader können Sie so viele feine JS-Bibliotheken nutzen, die Ihren Entwicklungsworkflow optimieren. CSS-loader zum Beispiel hilft Ihnen bei der Verwaltung Ihrer CSS-Entwicklung, indem Sie lokales Scoping , das genau das ist, wonach Sie suchen.
Angenommen, Sie erstellen ein konzeptionelles Widget namens "Awesome Widget" und möchten es vollständig vor Konflikten mit umgebenden Elementen oder untergeordneten Elementen schützen, die sich als Inhalt im Widget befinden.
Was wir nicht wollen
%Vor%Lösung 1: CSS-Kindkombinator
Verwenden Sie den CSS-Unterkombinator-Selektor, um anzugeben, dass nur direkte untergeordnete Elemente ausgewählt werden sollen.
%Vor%Lösung 2: Klassennamespacing
Verwenden von aw (Awesome Widget) als Namespace für jede Klasse, verringert die Wahrscheinlichkeit anderer Elemente auf der Seite mit genau diesem Namespace + Klassennamen.
%Vor%Es gibt auch etwas wie @namespace in CSS, aber das ist nur für XML.
Gibt es neben Lösung 1 und 2 noch weitere? Welchen würdest du bevorzugen? Best Practices?
BEARBEITEN: Beispiel für ein Problem, das ohne geeignete Namespacing- / Styling-Konfliktprävention auftritt
Widget-Styling:
%Vor%Benutzer Styling:
%Vor%Auszeichnung:
%Vor%Hier sind ein paar Lösungen:
XBL könnte helfen, wenn es jemals in Browsern implementiert wird, da es Möglichkeiten zum Entwerfen von Widgets gibt, die eine Weitergabe verhindern können Styling-Informationen.
Ein weiterer Vorteil ist die Performance, wenn man den Child-Kombinator mit einbezieht. Es muss nicht alle Ebenen möglicher Kinder überprüft werden, um zu bestimmen, wie gerendert wird.
Aber wenn Sie der Kürze halber Klassennamen verwenden, sollten höchstens zwei ausreichen, denke ich, es sei denn, Sie benennen nicht deutlich genug:
%Vor%Sie könnten den Nicht-Benutzer-Inhaltsbereichen auch einen Container (mit einer Namespace-Klasse) auf der höchsten möglichen Ebene geben, der den Benutzerinhalt nicht einschließt, wodurch Sie sich vor diesem Risiko schützen. %code% ist ziemlich praktisch für diese Art von beliebiger Gruppierung und zu diesem Zweck gemacht ...
Ich würde bevorzugen, eine Kombination der beiden Lösungen zu verwenden, wie:
%Vor%Weil der zweite dem Markup eine Menge unnötigen Gewichts hinzufügt.
Für Ihr Beispiel würde ich einen Wrapper um den Benutzerinhalt mit der Klasse %code% einfügen und dann ihr CSS mit %code% voranstellen. Dies ist jedoch nicht anmutig, es fügt etwas Markup hinzu und ich denke, es wäre anfällig für Fehler.
Tags und Links html css namespaces widget