t/494: Increased the specificity of CSS rules. Introduced the .ck class for editor UI components

[oleq]

Suggested merge commit message (convention)

Docs: Increased the specificity of CSS rules. Introduced the .ck class for editor UI components. Closes #494.

---

Additional information

All branches in the constellation:

• https://github.com/ckeditor/ckeditor5-basic-styles/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-block-quote/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-editor-classic/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-engine/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-heading/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-image/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-link/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-theme-lark/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-ui/compare/t/ckeditor5/494
• https://github.com/ckeditor/ckeditor5-widget/compare/t/ckeditor5/494

---

Message for merging child branches

Other: Increased the specificity of CSS rules. Introduced the `.ck` class for editor UI components (see: ckeditor/ckeditor5#494).

[Reinmar]

Why did you increase the specificity of content styles too? This issue was about UI's styles. Content styles are a different topic – they should be fairly simple to be overridden by the developer.

[oleq]

These are the documentation styles, not user content styles.

[Reinmar]

I didn't mean this. I meant all the changes in basic-stylers, block-quote, image, headings, etc.

[oleq]

Maybe you're right. WDYT @dkonopka?

example

[dkonopka]

I agree, blockquote border-color or code background should be easy to change, without fighting with CSS specificity, because we are skipping CSS Variables in content styles ( https://github.com/ckeditor/ckeditor5-block-quote/issues/21)

So I'm ok with adding extra .ck for UI Elements like buttons, icons, tooltips to be sure that it will be displayed properly in most cases and we have a lot of vars to change color/size/background of it.

[oleq]

I undid the changes in basic-styles, block-quote and image.

[dkonopka]

Looks good to me 👍

[Reinmar]

I reviewed all the changes and I'm unsure about these:

• https://github.com/ckeditor/ckeditor5-heading/compare/t/ckeditor5/494 – I assume this styles the headings in the dropdown. I'm not entirely sure whether I think about this more as about the content or about the UI.
• https://github.com/ckeditor/ckeditor5-image/compare/t/ckeditor5/494#diff-1d370f46d756a5c592c29c39a45704fbL11 – I think we miss the figure part here. For some reason, the figure.image always come together for me. But maybe it's unnecessary? @dkonopka @Comandeer

[Reinmar]

These changes don't make much sense to me. Either .ck or .live-snippet. The latter was used so far to bump up the specificity. Now, one of these become unnecessary.

[Reinmar]

Also, .ck is part of the UI, and .image-style-left of the content. So, if anything, the selector which makes the most sense here is .ck-content .image-style-left. But then, the content will not look good before the editor is initialised, so it'd be good to use a class which is always present. Which is... .live-snippet ;)

[oleq]

Let's stick to .l-s :P

[oleq]

https://github.com/ckeditor/ckeditor5-heading/compare/t/ckeditor5/494 – I assume this styles the headings in the dropdown. I'm not entirely sure whether I think about this more as about the content or about the UI.

I consider it the UI.

https://github.com/ckeditor/ckeditor5-image/compare/t/ckeditor5/494#diff-1d370f46d756a5c592c29c39a45704fbL11 – I think we miss the figure part here. For some reason, the figure.image always come together for me. But maybe it's unnecessary? @dkonopka @Comandeer

We used to have figure.image (1,1) to raise the specificity. I propose .ck-content image, which has the same specificity, but clearly defines the purpose of the style.

The icon, OTOH, is a different story. We had svg.ck-icon (1,1) to raise specificity but since this is the UI we can use .ck.ck-icon (2,0), which is stronger and clearer (I did it wrong in the PR — svg is unnecessary).