search

markthedesigner / prj-rev-bwfs-dasmoto

0 stars 0 forks source link

Avoid Repeating Styles when possible #2

Open zannain opened 6 years ago

zannain commented 6 years ago

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-weight: bold;

Alternatives

  1. 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.

  1. Using CSS Variables
:root {
    --default-font-weight: bold;
}

#paint {
     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/ selector and the entire page is updated.