i have css file styles:
button-text-only { padding: .4em 1em; } .ui-buttonse { margin-right: 7px; } .ui-datepicker { left: 2px; } ... , etc ... how can css styles actualy inside container id = "date_catr"?
there few of ways think can approach this, has been stated can prefix rules 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 have apply 50-100 styles adds fair bit of uneeded css , may ever reduce speed @ css applied (which more noticeable on mobile devices).
the problem is, apart above there few ways want.
you use scoped styles, sounds great idea, until realise firefox literlly browser currently supports this (and looks of it, browser support foreseeable future).
you try include html via iframe, intended css inline inside said iframe, css inside iframe applies inside iframe, , css applied page doesn't effect content inside iframe. scoped styles solution described above except has full browser support.
iframes bit messy, add unnecessary bloat page , bit of pain maintain.
the other solution can think of prefixing css , changing in css, means css doesn't bigger, , ensures speed @ css applied shouldn't effected, messy , cumbersome maintain, i'm not sure if want elements inherit base styles classes you've posted ... regardless might so:
.i-button-text-only { padding: .4em 1em; } .i-ui-buttonse { margin-right: 7px; } .i-ui-datepicker { left: 2px; } etc. personally i'd go option one, maybe class don't have deal specificity issues later down line. you'll end little bit of slowness, should pretty unnoticeable (hopefully)
