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

Created on 7 May 2024, 4 months ago
Updated 3 July 2024, 2 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 custom theme styles inside ckeditor on the admin pages. For example, our ".cards" do not have borders, but Claro's do! So I have to write new styles to counteract Claro putting borders on my cards in the wysiwyg.

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

11.0 🔥

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

Production build 0.71.5 2024