> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/guidelines/styles-guidelines/hierarchy.md).

# 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.

{% hint style="info" %}
CSS modern patterns like`CSS-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.
{% endhint %}

Instead

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

Do

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

.sds_button_span{
	var(--sds_theme_text);
}
```