# Using css-layers to easily overwrite styles without using !important

**URL:** <https://community.silverbullet.md/t/using-css-layers-to-easily-overwrite-styles-without-using-important/361>\
**Category:** Ideas\
**Created:** [April 3, 2024, 8:39pm UTC](https://community.silverbullet.md/t/using-css-layers-to-easily-overwrite-styles-without-using-important/361 "2024-04-03T20:39:26Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel](https://community.silverbullet.md/user_avatar/community.silverbullet.md/daniel/32/271_2.png) [@daniel](https://community.silverbullet.md/u/daniel)\
**Post date:** [April 3, 2024, 8:39pm UTC](https://community.silverbullet.md/t/using-css-layers-to-easily-overwrite-styles-without-using-important/361/1 "2024-04-03T20:39:26Z")

</div>

I tried to do some theming using space-styles and I noticed that a lot of the time `!important` is necessary to override existing styles. Since I heard of css `@layer`s I thought they might be a good solution, although I hadn’t used them until now.

So I decided to give it a try: [GitHub - daniel-michel/silverbullet at use-css-layers](https://github.com/daniel-michel/silverbullet/tree/use-css-layers)

This seems to work, although I haven’t tested it thoroughly and it is a very quick and dirty solution. Especially the way I wrap the CodeMirror styles in a layer is not that great, but I could not figure out how those styles are added. Therefore I added a little bit of code that changes the style element: [use css layers to reduce the need for !important (especially when usi… · daniel-michel/silverbullet@21046a3 · GitHub](https://github.com/daniel-michel/silverbullet/commit/21046a36122640d0c5492a1b1a1e6777e812495b#diff-8f62b6ced28d3396b501d2e89a2e7cb761d16cd7dc977aebece03d4a5da5c24e)

Maybe someone has a better solution?

I have already seen `!important` being used in some examples. Is this just annoying me or are you all also interested in a solution? And what are your thoughts on this solution?