Instead, it is recommended to assign a new BEM class to the element you want to style. Then, you can select it properly:
In some cases, you might need to style one Block differently depending on whether it is a child of another block.
Avoid nesting selectors - don't select a block nested inside another block:
// this is discouraged
This is discouraged for several reasons:
Button styles now contain selectors from another component. This causes coupling, which will result in issues if the .ContactForm block is renamed
The selector has higher specificity, making it harder to override.
Instead, consider using a variable to customize your styling:
// by default, a value of 5px will be inherited from:root
// we can set the variable lower in the hierarchy to override it
Now, each component is responsible for its own styles only, and the specificity is still low.
In this case, another possible solution would be to use a Modifier:
Now, the button could take a prop to specify the margin size and add it as a modifier to the Button Block. Then, the ContactForm would have to pass a value to this prop indicating that the button should have a larger margin.
Prefer Mobile-First Styling
Mobile-first styling means that you are encouraged to start with mobile styles. When mobile styles are complete, you can use the @include desktop directive and other breakpoints to adjust the styling for larger viewports.
Avoid Magic Numbers
You should avoid hard-coding numbers when their reasoning is not obvious. Make values re-usable and understandable by using CSS variables.
Avoid hard-coded values:
Unclear where the value 110 is coming from
The layout can break if some values are changed
Instead, use variables, and combine them with calc if necessary:
Variable values can be safely changed to adjust the layout
Each value is re-usable.
Use Round Numbers
Unless you need to produce a pixel-perfect design, we recommend using values rounded to the nearest 5px, avoid unnecessary decimal digits, and consider how much precision browsers can actually display.