Avoid Repeating Styles when possible

[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;
  font-size: 100px;
  font-weight: bold;

Alternatives

1. Using a body selector would be more appropriate

body {
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
}

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 {
    --font-size: 1.75rem;
}

#paint {
     font-size: var(--font-size);
}

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.

[Valeruu]

Thanks for the advice. I tried to implement this in the Broadway project. I played around with the CSS in that a lot to try learn.Haven't tried the variables yet though.