Overly specific CSS selectors

[mindplay-dk]

it looks like you're using a BEM convention for the CSS class names?

and it looks like the class names are being applied to individual, specific elements using a BEM like pattern?

but then the SCSS is organized in deeply nested structures, yieling selectors with arbitrary specificity, such as:

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected

it looks like the SCSS nesting directly mirrors the HTML element structure? for example:

react-datepicker/src/stylesheets/datepicker.scss

Lines 283 to 308 in 524bc31

	.react-datepicker__time {
	position: relative;
	background: white;
	border-bottom-right-radius: 0.3rem;
	.react-datepicker__time-box {
	width: 85px;
	overflow-x: hidden;
	margin: 0 auto;
	text-align: center;
	border-bottom-right-radius: 0.3rem;
	ul.react-datepicker__time-list {
	list-style: none;
	margin: 0;
	height: calc(195px + (#{$datepicker__item-size} / 2));
	overflow-y: scroll;
	padding-right: 0;
	padding-left: 0;
	width: 100%;
	box-sizing: content-box;
	li.react-datepicker__time-list-item {
	height: 30px;
	padding: 5px 10px;
	white-space: nowrap;

what you probably meant to do is something like:

  .react-datepicker__time {
    // ...
    &-box {
      // ...
    }
    &-list {
      // ...
      &-item {
        // ...

which would yield flat BEM-style selectors like:

.react-datepicker__time-list-item--selected

this approach gives you an SCSS file that mirrors the BEM structure, rather than the HTML structure.

the point of this is, your emitted CSS file will be much, much smaller - the rules will all have the semi specificity, which is the point of using the BEM pattern, making it easy (possible) to override the standard CSS for the component by merely adding your own CSS after the imported standard CSS.

currently, you need to either write extremely long CSS selectors to override anything - or use !important everywhere, or contain the component's CSS in a cascade layer or something... either way, you're fighting the component's standard CSS for control.

I don't see why you would need very specific selectors? unless maybe you're fighting some other CSS framework (boostrap?) for control in the first place?

let me know if you're interested in solving this? maybe I can help.