CSS Conflict Prevention and Name Management Techniques

Question

Suppose you create a concept widget called Awesome Widget and want to completely protect it from conflict with surrounding elements or child elements that are like content inside the widget.

What we do not want

div ul li {} 

Solution 1: CSS Combinator for Kids

Use the selector for CSS child combinators to specify that only direct children be specified.

 .awesomewidget > div > ul > li {} 

Solution 2: class namespace

Using aw (Awesome Widget) as the namespace for each class, which reduces the likelihood of any other elements appearing on the page using the exact namespace + class name.

 .awesomewidget .aw-container .aw-list .aw-listitem {} 

There is also something like @namespace in CSS, but it is only for XML.

Besides solutions 1 and 2, are there any others that can be used? Which one would you prefer? Any best practices?

EDIT: An example of a problem that occurs without properly preventing name / style conflicts

Widget Style:

 .awesomewidget > div ul li { background-color:red; } 

Custom style:

 ul li { background-color:blue; } 

Markup:

 <div class="awesomewidget"> <div> <ul> <li> <!-- user content starts here --> <p>I am the user and I want to add some content here. Let add a list:</p> <ul> <li>Why is this list-item red and not blue?</li> </ul> <!-- user content ends here --> </li> <li> <!-- user content starts here --> <!-- user content ends here --> </li> </ul> </div> </div> 

Answer 1

I would prefer to use a combination of two solutions, such as:

 .awesomewidget > div ul li {} 

Because the second adds a lot of unnecessary weight to the markup.

Update

In your example, I would add a wrapper around user content with the .user class, and then add CSS using .user . However, this is not elegant, it adds some markup, and I think that it will be prone to failure.

Answer 2

XBL can help if it will ever be implemented in browsers, as it has ways to design widgets that can avoid passing style information.

Another advantage, by the way, is the inclusion of a child combinator - performance. You do not need to check all levels of possible child elements to determine how to render.

But if you are going to shorten the class-names for brevity, two should be enough for you, I would think, if you do not name it clearly enough:

 .awesomewidget .aw-listitem {} 

You can also provide a container (with a space class with the names of the wells) to the section (s) without user intervention at the highest possible level, which does not include consumer content, eliminating this risk. <div/> quite convenient for this kind of arbitrary grouping and is made for this purpose ...

Answer 3

If you have a lot of conflicts with CSS name names, maybe it's time to consider switching to a JS front-end infrastructure like Facebook ReactJS . This, combined with the Webpack module loader , allows you to use many great JS libraries that streamline your development workflow. A CSS loader , for example, helps you control the development of CSS by making local coverage , which is exactly what you are looking for.

Answer 4

Here are some solutions:

• Check the original order to make sure that global styles are linked before page styles in head
• Use target to call custom CSS
• Use generated content to bind styles
• Use attribute selector to increase specificity