In my sass I'm keen for it not to get out of hand, i've a simple question/example what I'd like to know is what'd be the most efficient way to target the button in the example below?
Personally I like option 2 but have i done it correctly?
Call it picky but my problems are as listed below,
I'm not a fan of adding class/id to everything through html
Using Sass's ability to nest/target child elements within a parent is too overly specific
Option 1: Give button class name in html making it easy to target in css
<div id = "box">
<!-- Give button class/id -->
<button class = "button1"></button>
</div>
Option 2: Have _buttons.scss partial containing a .button1 class
On my main.scss target the parent container #box without button a class name in html, and then target nested button
buttons.scss
.button1 {
width: 100px;
height: 100px;
background-color: grey;
}
main.scss
@import 'components/buttons.scss';
#box {
button {
// Extend class from buttons.scss
@extend .button1;
}
}