Theme style precedence is hard to manage #309

Closed
opened 2020-10-05 16:59:43 +02:00 by marijnh · 1 comment
marijnh commented 2020-10-05 16:59:43 +02:00 (Migrated from github.com)

With 9fa3bcafd0, themes can use more complicated selectors—which was often necessary—but that makes them subject to CSS's own precedence behavior again, which can be awkward and hard to predict. For example, the base theme defines a style for $$focused$light $cursor (.ID.cm-focused.cm-light .cm-cursor), and a theme that just styles $cursor, which would be a reasonable thing to do, will simply be overridden by the default cursor color.

I'd be nice if real themes always override rules from base themes, but CSS doesn't have a good way to express that. Not sure how, short of adding a bunch of bogus classes to boost rules' precedence, to address this.

With 9fa3bcafd0fc82, themes can use more complicated selectors—which was often necessary—but that makes them subject to CSS's own precedence behavior again, which can be awkward and hard to predict. For example, the base theme defines a style for `$$focused$light $cursor` (`.ID.cm-focused.cm-light .cm-cursor`), and a theme that just styles `$cursor`, which would be a reasonable thing to do, will simply be overridden by the default cursor color. I'd be nice if real themes always override rules from base themes, but CSS doesn't have a good way to express that. Not sure how, short of adding a bunch of bogus classes to boost rules' precedence, to address this.
marijnh commented 2020-10-14 09:53:39 +02:00 (Migrated from github.com)

Attached patch always adds the main selector, making sure that theme-based selectors aren't shadowed by base + light/dark selectors. The general problem of CSS specificity isn't solved by that, so some care must still be taken, but it's less error-prone now.

Attached patch always adds the main selector, making sure that theme-based selectors aren't shadowed by base + light/dark selectors. The general problem of CSS specificity isn't solved by that, so some care must still be taken, but it's less error-prone now.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/dev#309
No description provided.