Hierarchy

Styles in components are not going to have hierarchy (Like in standard CSS good practices), instead, all the styles are going to be implemented using a base level. This decision was made in order to benefit developers at the moment of overwriting components styles with their own.

CSS modern patterns likeCSS-Modules, where hierarchy is not a priority, is one of the most benefitied patterns with this non-hierarchy approach, allowing developers to overwrite styles without caring of the internal structure of the component and its CSS hierarchy.

Instead

.sds_button{
	background: var(--sds_theme_color_primary);
	
	.sds_button_span{
		color: var(--sds_theme_text);
	}
}

Do

.sds_button{
	background: var(--sds_theme_color_primary);
}

.sds_button_span{
	var(--sds_theme_text);
}