Applying layouting CSS to base widgets using a root (parent) selector, with purpose to its context

[andreififiita]

Hello, I recommend applying certain CSS that has an impact on layout/margins using a selector that contains a parent.
For example, in GMD 2.5.0 we have for default checkbox:

.checkbox {
margin-bottom: 20px;
}

But this design pattern is bad when creating custom UI, especially when this type of css is added to new versions.
This could be easily done using a predefined (material) panel, for ex. let's say we have a widget called VerticalContainer:

.vertical-container .checkbox {
margin-bottom: 20px;
}

So, other examples would be:

.grid-container .checkbox {
margin-bottom: 20px;
margin-inline-end: 20px;
}

PS: I see this pattern in many of the base widgets (for ex listbox, textbox etc since 2.3.0 ), which is not consistent also. For example checkbox has margin bottom 20px but textbox has margin top 1rem.

Addendum:
I see many of the base CSS that do not have a root are located in the "materialize.css" file, so if that is a framework on which GMD is based, that means a way of resetting all styles should be provided (for ex some styles from GMD). This would also prevent breaking changes in new upcoming versions.

[kevzlou7979]

We stick to materialize-0.97 version and we have provided massive customizations and fixes on GMD only SASS files https://github.com/GwtMaterialDesign/gwt-material-themes/tree/master/src/main/sass.