Let’s use two classes

The general design for the list of all Muffin’s skills is ready. Well done! Now we need to style individual list items, according to service package.

Recall how we separated the skill items from the ordinary items. We added a class to them that says that what we are dealing with is a skill (skills-item). Could we add one more class to certain skills that will associate them with a certain service package and distinguish them from other skills? We can, in fact, so one element can have two classes at the same time.

In fact, an HTML element can have any number of classes. They are listed in the class attribute and separated by spaces. Take, for example:

<li class="product">Product</li>
<li class="product hit">Product, which is one of our bestsellers, too</li>
<li class="product hit sale">Product, one of our bestsellers and on sale, too!</li>

Using several classes is called mixing classes and is a common technique. Usually mixing is implemented as follows: an overall design is applied to one class, and its variants are applied by additional classes. In the example above, the sizes of product listings can be described in the CSS rule .product and a special background for a bestseller can be described using the rule .hit. Generally speaking, this is a convenient technique that reduces the amount of duplicated code.

All that remains for us to do is come up with classes for our service packages. We will not introduce an additional class for our Economy service package. For our Standard service package we will use the standard class, and for our VIP service package we will use the vip class. That’s everything. Now you are ready to modify your markup.