2 ms·
Judicial use of utility spacing classes is a pretty good option here. Instead of... .btn { margin: 8px; background: whitesmoke; } <bu
by montroser 5y ago
Judicial use of utility spacing classes is a pretty good option here.
Instead of...
.btn {
margin: 8px;
background: whitesmoke;
}
<button class="btn">Send</button>
Use utility classes in the markup rather than spacing in the reusable definition...
.btn {
background: whitesmoke;
}
.m-8 {
margin: 8px;
}
<button class="btn m-8">Send</button>
This approach yields decent readability, fewer elements than if we needed containers wall around, and good flexibility for many contexts and situations.
- atoav 5y agoShort question: Why not select the button element in this case — if you already want to select all of them anyways? button { margin: 1em; } or if you just want certain buttons .someparent button { margin: 1em; } I tend to use classes only to specify the identity of a thing: so something like .close-button or similar.
- montroser 5y agoIn a smaller project, styling all buttons might be a fine/good way to do it. But in a larger project, it is inevitable that you will have buttons which you actually don't want to inherit your global styles, and it's a pain and messy to have to override/undo the styles. Like, you bring in a third-party video player, or checkout form, or chat client, and it's busted because your global margin button styles are leaking in. As to why not scope with .someparent, it can work, but if you already have spacing utility classes ready to go, it's easier to just add the three characters in the class. And as a bonus, when you add another button somewhere else nested way deep under .someparent, it won't accidentally inherit the margin you meant for the first button.