CODEWITHSUNDEEP
css
nonopolarity
nonopolarity

Reputation: 151026

In CSS, how to avoid accidentally getting a style from other classes, especially for widgets?

When we write our widgets using HTML, JavaScript, and CSS and package the widgets together as a library, we may have

.foobarwidget-sidebar-section .sub-section { border: 1px solid #000 }

so we will implement the JavaScript to work with the behavior of this widget that we defined, that can be used in any page on our website or by other people.

But then, if there is a user of this widget, and he has HTML in his own webpage for a "sub-section":

.sub-section { color: green }

Then pretty much his .sub-section will add to our widget's CSS style.

It is true that he can use

#the-main-content .sub-section { color: green }

or

.a-main-content-box .sub-section { color: green }

so that it doesn't affect our widget, but what if his design is that the #main-content box contains our sidebar widget (or a search box widget, or a social link button widget)? In that case, his .sub-section will again affect our CSS for the widget.

Of course, we can define all the possible CSS styles for our widget, such as

.foobarwidget-sidebar-section .sub-section { color: blue !important;
                                             font-weight: bold !important;
                                            /* ... and all possible CSS styles ... */
                                           }

but that doesn't look like a good feasible solution. We also might use

.foobarwidget-sidebar-section > .sub-section { ... }

so that the .sub-section must be the immediate child, but it doesn't affect a standalone .sub-section affect our widget's CSS. In such situation, what is a good solution to handle it?

Upvotes: 1

Views: 158

Answers (4)

Nick Tomlin
Nick Tomlin

Reputation: 29221

I would just use an id. The CSS gods frown on IDs, but I think it's perfectly acceptable given the fact that you may or may not have control over the markup / user styles. This will reduce the chances of a user accidentally breaking your layout, while still allowing them to do so if they need it. For better or worse, i've seen this pattern in a lot of jQuery modules that are dealing with similar concerns.

It would also help to have more general "modular" class that describes the general functionality of foobarwidget and is not tied to a location like .sidebar-section. From there, add the styles that make up foobarwidget. This will keep your css cleaner, and allow you to deploy foobarwidget to any area of the page without having to create an entirely new class name.

So, .foobarwidget-sidebar-section .sub-section { border: 1px solid #000 } becomes:

#foobarwidget {
  border: 1px solid #000;
  background:white;
}

#foobarwidget .subsection {
  /* this could probably be declared in #foobarwidget */
  color:black; /* one could use !important here, if absolutely necessary */
}

Upvotes: 0

lima_fil
lima_fil

Reputation: 1771

You can put your css file last in the head, with jQuery:

$('head').append('<link rel="stylesheet" href="yourcss-last.css" type="text/css" />');

Upvotes: 0

Musa
Musa

Reputation: 97672

You should use a less generic class for your widget something like .my-custom-widget-name-sub-section

Upvotes: 1

icktoofay
icktoofay

Reputation: 129011

Disqus, which needs to handle this sort of thing, opted to solve their problem by putting their widget inside of an iframe where the parent's stylesheet won't affect it. I believe other popular widgety things do this too.

Upvotes: 1

Related Questions