How to write less css to create square boxes of different color-CodePudding

I am creating small divs that contain different colors so users can select them. Currently, I have to insert something between the span tag

<span>11</span>

so that the elements appear on the screen. I tried adding content:"" in the CSS but it's not working.

Can someone suggest to me a better way to solve the problem? The issue is when I'm creating a yellow box and then I have to add extra color: "yellow" to make sure the box is just a box with a color(no text in it). There should be a smarter approach right?

    .colorselection {
      width: 5px;
      height: 5px;
      margin-left: 12px;
      content: "";
    }

    .colorselection--yellow {
      background: yellow;
    }

    .colorselection--black {
      background: black;
    }

 .colorselection--red {
      background: red;
    }

<!-- begin snippet: js hide: false console: true babel: false -->

    <span class='colorselection colorselection--black'>11 </span>
    <span class='colorselection colorselection--red '>12 </span>
    <span class='colorselection colorselection--yellow'>13 </span>

CodePudding user response：

You should use Flexbox.

MDN Docs on Flexbox
CSS Tricks - Guide to Flexbox: this is a very good explanation of the concepts of Flexbox

.flex-box{
    display: flex;
}

.colorselection {
  width: 20px;
  height: 20px;
  margin: 2px;
}

.colorselection--yellow {
  background: yellow;
}

.colorselection--black {
  background: black;
}

.colorselection--red {
  background: red;
}


.colorselection--red {
  background: red;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

There are a few HTML tags working as a block element while span working as an inline element. So you either have to go with a block element HTML tag or simply use display: block or display: inline-block with your span tag.

.colorselection {
  width: 25px;
  height: 25px;
  margin-bottom: 12px;
  display: block;
  background: #ddd; /* fallback color */
}

.colorselection.yellow {
  background: yellow;
}

.colorselection.black {
  background: black;
}

.colorselection.red {
  background: red;
}

<span ></span>
<span >11</span>
<span ></span>
<span >11</span>
<span >11</span>
<span ></span>

CodePudding user response：

My preferred way of handling this is using CSS variables. You first create a variable that is scoped to the color-selection class, so that it can be overridden by changes within its own scope. Providing a block level display will allow the element to honor height and width dimensions. You could also use inline-flex, flex, or inline-block to achieve the same result.

.color-selection {
  --box-color: transparent;
  width: 25px;
  height: 25px;
  background-color: var(--box-color);
  margin-bottom: 0.5rem;
  display: block;
}

.color-selection.black {
  --box-color: black;
}

.color-selection.yellow {
  --box-color: yellow;
}

.color-selection.red {
  --box-color: red;
}

<span ></span>
<span ></span>
<span ></span>
<span ></span>

jsFiddle