Modifiers and BEM Question.

Separator-1.scss

// method does not set a default.

.Separator{
	
}
.Separator--1{
	border-style: dashed;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Separator--2{
	border-style: dashed;
	border-color: $colour--Vivid300;
	border-width: 0 0 1px 0;
}
.Separator--3{
	border-style: solid;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}

Separator-2.scss

// default is set and redundant values removed.

.Separator{
	border-style: solid;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Separator--1{
	border-style: dashed;
}
.Separator--2{
	border-style: dashed;
	border-color: $colour--Vivid300;
}

Separator-3.scss

// default set and redundant values removed, names changed to allow for more flexibiliy.
// i.e class="Separator Separator--colour1" can be made while others would need a new class.

.Separator{
	border-style: solid;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Separator--dashed{
	border-style: dashed;
}
.Separator--colour1{
	border-color: $colour--Vivid300;
}

Separator-4.scss

// Same as first file but all modifiers have all values listed

.Seperator{
	border-style: solid;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Seperator--1{
	border-style: dashed;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Seperator--2{
	border-style: dashed;
	border-color: $colour--Vivid300;
	border-width: 0 0 1px 0;
}

Separator-5.scss

// default not fully set but ensures no overiding.
// i.e class="Separator Separator--colour2 Separator--solid" can be made while others would need a new class.

.Separator{
	border-width: 0 0 1px 0;
}
.Separator--solid{
	border-style: solid;
}
.Separator--dashed{
	border-style: dashed;
}
.Separator--colour1{
	border-color: $colour--Vivid300;
}
.Separator--colour2{
	border-color: $colour--Neutral600;
}

Separator-6.scss

.Separator{
	border-style: solid;
	border-color: $colour--Neutral600;
	border-width: 0 0 1px 0;
}
.Separator--dashed{
	border-style: dashed;
}
.Separator--blue{
	border-color: $colour--blue;
}

We ended up using number six because we decided it was it's own block, it would have had browser defaults for border-style, and border-color so we may as well reset it.

We also didn't make the modifiers numeric as these numbers often have to be double checked while authoring as they are meaningless. Instead we use the colour names.

While you could state "What if colour1 had to get updated from red to blue" we realised that currently the buttons have 8 colour modifiers with --1 to --8 on them and if the separator initially has three versions --1 to --3.

Separator could eventually end up with all 8 colours but the modifier of --5 on a Button could be red and --5 on a separator could be blue which would be confusing for development.

We almost always have control of our HTML so finding and replacing was no big drama compared to the ease of development in giving them english names such as .Separator--green.