Multicolor bar above form legend I've implemented a multicolored bar as shown in the image below. It is a bar that is placed above the legend of an HTML form. (Ignore the border radius for now.)



I have accomplished this with a simple approach of using span elements.



*{
    margin: 0px;
    padding: 0px;
}

span{
    height: 5px;
    width: calc(100% / 7);
    background: black;
    display: inline-block;
}

span[data-color='green']{
    background: #C3E279;
}

span[data-color='pale-yellow']{
    background: #F7FEC8;
}

span[data-color='orange']{
    background: #FFD069;
}

span[data-color='red']{
    background: #F27669;
}

span[data-color='light-purple']{
    background: #DC9CBE;
}

span[data-color='purple']{
    background: #C59AE0;
}

span[data-color='blue']{
    background: #969DCC;
}
&lt;div id="decoration"&gt;
    &lt;span data-color="green"&gt;&lt;/span&gt;&lt;span data-color="pale-yellow"&gt;&lt;/span&gt;&lt;span data-color="orange"&gt;&lt;/span&gt;&lt;span data-color="red"&gt;&lt;/span&gt;&lt;span data-color="light-purple"&gt;&lt;/span&gt;&lt;span data-color="purple"&gt;&lt;/span&gt;&lt;span data-color="blue"&gt;&lt;/span&gt;
&lt;/div&gt;




Is there a better way to do this to make the code smarter, presentable and easy to understand to other developers?
Unless your elements serve a legitimate purpose (ie. they have content), then you should avoid using empty elements whenever possible.  Instead, I recommend using a linear-gradient as a background on a content element.

Sass makes this easy to generate:

$colors: #C3E279, #F7FEC8, #FFD069, #F27669, #DC9CBE, #C59AE0, #969DCC;
$stops: ();
$current-stop: 0%;
@each $c in $colors {
    $stops: append($stops, $c $current-stop, comma);
    $current-stop: $current-stop + (100% / length($colors));
    $stops: append($stops, $c $current-stop);
}

body:before { /* or some other element*/
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, $stops);
}


Output:

body:before {
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, #C3E279 0%, #C3E279 14.28571%, #F7FEC8 14.28571%, #F7FEC8 28.57143%, #FFD069 28.57143%, #FFD069 42.85714%, #F27669 42.85714%, #F27669 57.14286%, #DC9CBE 57.14286%, #DC9CBE 71.42857%, #C59AE0 71.42857%, #C59AE0 85.71429%, #969DCC 85.71429%, #969DCC 100.0%);
}


http://sassmeister.com/gist/9665cd09dfab6b3e05e0