Not how but MOST efficient way to target element in Sass? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
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;
}
}

Answer 1

I think it depends on how often you are going to use the styling for different buttons. Having an id of 'box' seems very specific to me though. Are you not going to have any other boxes? If so, this needs to be a class and not an id.
Instead of targeting a parent and styling the child (what happens when u want to style an element without that parent), I would just style the class on the button itself.
1st option - only one class needed in the HTML
.button1{
/* button css */
}
2nd option - id attribute needed, specific HTML hierarchy, more CSS output
#box button, .button1{
/* button css */
}

Answer 2

A lot of the answer as to what's "most efficient" when it comes to SASS and partials depends on what your complete SASS configuration will look like, so it's hard to say based on a specific example.
Are you going to need to use the style for this button in multiple stylesheets?
For instance, if you only have one style sheet (main.scss), I'd say there's no reason to use a partial at all. Partials should be used when you need to include the items in the partial in multiple stylesheets. Many people, for example, will write all variables and mixins in a partial and include them in every stylesheet.
Given this one specific example, the more efficient thing to do is not use a partial.
Adding a class to the button and targeting that class in the css, or targeting the container and child element (without class) is equally efficient:
#box button {}
button.button1 {}
Also, there's no reason to nest here if you don't have other rules inside of the #box parent:
#box {
button {
}
}
Just do this:
#box button {}
(And be careful with extends. If used in areas where they're not really needed, you can end up with a TON of unnecessary style rules. See this great article.)