Refactoring repeated styles with classes and CSS properties

[zannain]

Dont-Repeat-Yourself. This is an important programming principle. If you find yourself repeating certain styles this is an indication that you can simplify your stylesheet by making use of CSS classes.

Rather than applying the following styles multiple times.

  font-family: Helvetica, sans-serif;
  font-weight: bold;

Alternatives

1. Using a less specific selector may be more appropriate

body {
    font-family: Helvetica;
}

2. You can also create a style-specific class

.bold {
   font-weight: bold;
 }

Now you can give multiple element tags a class attribute of bold and they will all receive this common style. This is in fact how CSS libraries such as Bootstrap work.

3. Using CSS Variables

:root {
    --default-font-family: Helvetica, sans-serif;
    --default-font-weight: bold;
}

#paint {
     font-family: var(--default-font-family);
     font-weight: var(--default-font-weight);
}

With any of these approaches, it's easy to update a style simultaneously by modifying that variable or the .bold/body selector and the entire page is updated.

[anneliemm]

Hi, Zannain! Thank you for very good comments and tips! I used the font-family twice since it was indicated on two occasions that the text needs to be in Helvetica. I thought that the rest of the text will therefore need to be in times new roman.