How can I do so that css styles are actually inside container? - html

Question

I have a css file with styles:
button-text-only {
padding: .4em 1em;
}
.ui-buttonse {
margin-right: 7px;
}
.ui-datepicker {
left: 2px;
}
... and etc ...
How can I do so that css styles are actualy inside container with id = "date_catr"?

Answer 1

There are a few of ways that I think you can approach this, as has been stated you can prefix the rules with the container ID, e.g.
#date_catr button-text-only {
padding: .4em 1em;
}
#date_catr .ui-buttonse {
margin-right: 7px;
}
#date_catr .ui-datepicker {
left: 2px;
}
etc.
Unfortunately if you have to apply this to 50-100 styles this adds a fair bit of uneeded CSS and may ever so slightly reduce the speed at which the css is applied (which will be more noticeable on mobile devices).
The problem is, apart from the above there are very few ways to actually do what you want.
You could use scoped styles, this sounds like a great idea, until you realise Firefox is literlly the only browser that currently supports this (and by the looks of it, the only browser to support it into the foreseeable future).
You could also try to include your HTML via an iframe, with your intended CSS inline inside said iframe, CSS inside the iframe only applies inside the iframe, and css applied to the page doesn't effect any content inside the iframe. This is basically like the scoped styles solution described above except it has full browser support.
Iframes could however get a bit messy, add unnecessary bloat to the page and be a bit of a pain to maintain.
The only other solution I can think of is prefixing the css and changing it in the css, this means the css doesn't really get much bigger, and also ensures that the speed at which the css is applied shouldn't be effected, this could however be messy and cumbersome to maintain, I'm not sure if you want the elements to inherit base styles from the classes you've posted ... regardless it might look like so:
.i-button-text-only {
padding: .4em 1em;
}
.i-ui-buttonse {
margin-right: 7px;
}
.i-ui-datepicker {
left: 2px;
}
etc.
Personally I'd go for option one, maybe with a class so that you don't have to deal with specificity issues later down the line. You'll end up with a little bit of slowness, but it should be pretty unnoticeable (hopefully)

Answer 2

Prefix every rule above with #date_catr like this:
#date_catr button-text-only {
padding: .4em 1em;
}