[docs] Add css style guide section on open/closed principle #12276
Conversation
weltenwort
force-pushed
the
documentation/css-style-guide-clean-code-open-close
branch
from
f8da9ac to
4fa3418
Compare
style_guides/css_style_guide.md
Outdated
|
|
||
| When working with the browser default styles or third-party stylesheets the | ||
| selectors are sometimes overly broad so that they have to be re-used in order | ||
| to integrate the styles into the project. |
There was a problem hiding this comment.
What do you mean by re-using a selector so that the styles can be integrated into the project? Are there examples of this in the codebase?
There was a problem hiding this comment.
I was thinking of more generic selectors like a or input[type="text"], which are often styled by third-party libraries without care. Or take a widget library like ui-select, which does not allow the developer to specify his own classes. You're forced to modify existing classes provided by those libraries.
There was a problem hiding this comment.
Oh that makes a lot of sense. Could we reword this part? I usually think of this in terms of overriding selectors which we don't control. My suggestion:
We can't control the selectors introduced by third-party stylesheets and
these selectors may not adhere to our styleguide, e.g. `a` or `input[type="text"]`.
In these cases, we're forced to duplicate these selectors within our own
stylesheets and override those styles to control their look and feel.
When this happens, it's important to add comments which make it clear why these
selectors exist and which third-party dependencies they override. We should
also define these selectors in files which refer back to the dependency,
e.g. a file named `ui_select_overrides.less` will contain styles overriding those
introduced by the `ui-select` dependency.
There was a problem hiding this comment.
absolutely, thanks for the improvement!
style_guides/css_style_guide.md
Outdated
| </div> | ||
| ``` | ||
|
|
||
| To avoid the combinatorial explosion of classes with such groupings and its |
There was a problem hiding this comment.
its reads weirdly here. Should it be their? Is it referring a block?
There was a problem hiding this comment.
👍 it is referring to groupings, so their would be correct
style_guides/css_style_guide.md
Outdated
| modifiers, it is permissible to nest a block's selector under another block's | ||
| selector if: | ||
|
|
||
| * The relationship is a if a very narrow `element` to `elementGroup` kind that |
There was a problem hiding this comment.
Whoa, what happened with this sentence?
style_guides/css_style_guide.md
Outdated
|
|
||
| #### Exception: Normalization/Reset | ||
|
|
||
| We can not control the selectors introduced by third-party stylesheets and |
There was a problem hiding this comment.
Can we please use cannot? It's a word. 🍡
|
@archanid I hope to have addressed your remarks. Could you take another look, please? |
|
@weltenwort Could you please backport this to 6.x? |
|
Sure. What is the criterion for backporting style guide changes? |
|
Anything which isn't a BWC change should go back into |
As discussed in #12197, this PR adds some links to external documentation and a section on the open/closed principle to the css style guide.