Card title

... ``` But you don’t like the amount of margin on `.card-title`. Now what? Options: ``` /* Same specificity might work, as long as you're always loading you are always loading your CSS after */.card-title { margin: var(--my-margin-override);} ``` ``` /* The: I JUST WANNA WIN!!!! method */.card-title { margin: var(--my-margin-override) !important;} ``` ``` /* More tempered approaches to specificity battles */h5.card-title { margin: var(--my-margin-override);}.card-title.card-title { margin: var(--my-margin-override);} ``` I’m not a big fan of any of those approaches. They all come with at best little mental overhead and at worst a gnarly styling battle. This is an extremely not rare situation. Cascade Layers offers a delightfully simple fix: make your library CSS less powerful: ``` @import url("https://cdn.com/bootstrap.min.css") layer(framework); ``` Now any other CSS (that is either “unlayered” or is intentionally put into a “higher” layer) will automatically win over Bootstrap. I can just do: ``` /* This unlayered style will win over Bootstraps .card-title by virtue of Cascade Layers */h5 { margin: 2rem;} ``` CodePen Embed FallbackHow this effects how authors write CSS over time remains to be seen, in my eyes. But conversations like “always keep specificity low” which has long been a sensible over-arching CSS philosophy will change with Cascade Layers in play. Specificity just matters less when the tools to ensure the styles you want to apply more are easy to configure up front.