Multicolor bar above form legend

Question

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;
}

<div id="decoration">
    <span data-color="green"></span><span data-color="pale-yellow"></span><span data-color="orange"></span><span data-color="red"></span><span data-color="light-purple"></span><span data-color="purple"></span><span data-color="blue"></span>
</div>

Is there a better way to do this to make the code smarter, presentable and easy to understand to other developers?

Answer 1

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

Answer 2

Your implementation is quite fine, except that you didn't explain why you chose the data-color attribute as opposed to a simple class. If you used a CSS classes, both the stylesheet and the HTML would be much simpler. (See the code snippet below for the source and a demo.)

If the reason is that in your real application you need those data attributes for something, and it would be redundant to write:

<span class="green" data-color="green"></span>

Despite the redundancy, I think this solution would still be better. Because CSS is about styling a document, the data- attributes are for programming logic. For good separation of model-view-controller, I think it's better to leave the data- attributes out of styling rules.

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

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

span.green {
    background: #C3E279;
}

span.pale-yellow {
    background: #F7FEC8;
}

span.orange {
    background: #FFD069;
}

span.red {
    background: #F27669;
}

span.light-purple {
    background: #DC9CBE;
}

span.purple {
    background: #C59AE0;
}

span.blue {
    background: #969DCC;
}

<div id="decoration">
    <span class="green"></span><span class="pale-yellow"></span><span class="orange"></span><span class="red"></span><span class="light-purple"></span><span class="purple"></span><span class="blue"></span>
</div>