Contrib.social

Claro's CSS naming is too generic, clashes with custom theme styles in WYSIWYG

Open on Drupal.org →
Created on 7 May 2024, 12 months ago

One of the obvious needs of the wysiwyg (ckeditor) is to have stylesheets that styles elements to match the theme front-end. This includes entity embeds, that probably will have class names like ".cards", ".tabs", etc.

Unfortunately, the Claro admin theme stylesheets clash with the site theme because the Claro selectors are WAY too generic. So, like there are Claro stylesheets called "tabs.css" with selectors like ".tabs", and "cards.css" with selectors like ".cards".

Now, a site custom theme is very likely going to have classes called cards and tabs and what not. This causes a problem because Claro's styles are being applied to and are overriding custom theme styles inside ckeditor on the admin pages.

The point being that Claro's CSS should not be so generic. A class like ".cards" should be more like ".claro__cards" or whatever so that there's no danger of clashing with the user's CSS.

As it stands, I am going to have to write entire stylesheets just to counteract Claro's ill effects on our theme, and I am sure I'm not alone. It would make a lot more sense to me if Claro gave its CSS a namespace of sorts, so it is careful not to mess with the site's theme.

✨ Feature request
Status

Active

Version

10.2 ✨

Component
Claro  →

Last updated 1 day ago

Created by

🇺🇸United States jayemel

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jayemel
  • Comment 12 months ago →
    🇺🇸United States jayemel
  • Comment 10 months ago →
    🇳🇿New Zealand quietone

    Fixes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies. Also, 10.2 is in security mode now.

  • First commit to issue fork.
  • Comment 5 months ago →
    saurav-drupal-dev

    I have started working on this issue updating claro theme classes according to BEM Classes.

  • Comment 5 months ago →
    saurav-drupal-dev

    Hi @jayemel i have gone through the code structure of claro theme found out these classes are already using some unique selectors like card is getting used with hypens also if we are creating custom theme we can keep different classes because we have easy control there instead of changing in core themes template and style files. let me know if you have any other ideas.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024