Overriding certain style in SCSS

Question

I would like to add a disclaimer that initially I was thinking to write this in code review but since I won't be able to provide fully working code, I decided that SO would be a better place for this question.

That being said I have a form (more complicated but I think this is enough)

<form class="regular-form">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <input type="submit" value="Submit">
</form>

Where .regular-form resides in it's own file regular-form.css.scss and describes common styling for all form on the site. More specifically we have this:

.regular-form {
  ..
  input { width: 100%; }
}

However on some places width: 100% is not fitting well so I need to decrease it, but still maintain a common look & feel on the site, which means that I want the styling applied on the forms that need to be tighter to be the same everywhere.

I solved this problem by introducing new class .small-size and my question is regarding the usage of this new class.

Eventually what I would like is to be able to do this:

<form class="regular-form small-size">

But with my limited knowledge on SASS/scss the only way I can achieve this behavior is by adding the .small-size class inside the regular-form.css.scss file underneath the .regular-form styles like so

.regular-form {
  ..
  input { width: 100%; }
}

.small-size { 
  input { width: 50%; }
}

And while that .small-size is placed after .regular-form class I will be able to apply them on the same level. But this relaying on keeping the order like this forever feels like a wrong way to do it. If someone comes at a later point and introduce some changes so that the order is no more preserved, out of the blue the form will look different and I think this is a big minus of this approach.

The second approach that I can think of is nest the .small-size class inside .regular form like so

.regular-form {
  ..
  input { width: 100%; }
  .small-size { 
    input { width: 50% }
  }
}

Now I'm more confident that the styles won't break that easily, if someone is changing the styling at later point, he most probably will take into consideration that .small-size is nested and will inspect it's usage, however if I choose this approach the only way that I found so far in order to enforce the .small-size styling is by introducing new <div> to the form like so

<form class="regular-form">
  <div class="small-size">
    <label for="fname">First Name</label>
    ..
  </div>
</form>

But now I'm changing the existing DOM structure and also make the process of applying the new styling more difficult.

Eventually what I would like to have is nested class like so:

.regular-form {
  ..
  input { width: 100%; }
  .small-size { 
    input { width: 50% }
  }
}

And being able to apply it's styling like so

<form class="regular-form small-size">

I know that this somewhat contradicts with the general CSS rules but since I'm writing scss here I was thinking that there may be a way to make this work, or at least something better than the two options that I have right now.

Answer 1

One option would be to use the & selector in SASS and nest them like this:

.regular-form {
    input { 
        width: 100%; 
    }

    &.small-size {
        input { 
            width: 50%; 
        }
    } 
}

That way the .small-size CSS is only applied when it's on the same hierarchy level as the .regular-form selector. This also enable you to keep the HTML as is:

<form class="regular-form small-size">