Easy-to-understand explanations for beginners about points to note and rules when overwriting CSS!

In this article, we have summarized the rules and precautions for overwriting CSS, so please refer to it.

Let’s understand the rules and precautions for overwriting and be able to code cleanly.

Write CSS below and overwrite

First, the basic specifications.

If CSS is specified in the same selector, the description below takes precedence .

For example:

CSS
p {
font-size:10px;
}
p{
font-size:16px;
}

The font-size is specified separately in the p tag.

Priority is given to the description below, so the font-size is 16px.

CSS
p {
font-size:10px;
font-size:16px;
}

Even if it is specified at the same time as above, the description below takes precedence.

Also, if multiple CSS are loaded like the HTML below, the description of “style2.css” written below will be given priority.

HTML
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

It is often used to load the CSS common to all pages first, and then load the specific CSS for each page below that.

Overriding CSS with class selectors

Selectors with a class have higher priority than regular selectors.

CSS
p.sample {
font-size:10px;
}
p{
font-size:16px;
}

Basically, the description at the bottom has priority, but a selector with a class specified has a higher priority than a selector with nothing specified even if it is described above .

In this case the font-size is 10px.

Override CSS with ID selectors

A selector with an ID has higher precedence than a selector with nothing, just like a selector with a class.

IDs are more powerful than classes.

CSS
p#sampleid {
font-size:10px;
}
p.sample{
font-size:16px;
}

If ID and class are in conflict, ID takes precedence regardless of the description position . In this case the font-size is 10px.

Classes and IDs that specify elements have higher priority if the elements are also described.

CSS
p.sample {
font-size:10px;
}
.sample{
font-size:16px;
}

It means that “sample” with p tag is stronger than “sample” with no element specified.

Nest and overwrite CSS

Specifying selectors and details within selectors has higher priority .

CSS
div p {
font-size:10px;
}
p{
font-size:16px;
}

In this case, the p tag in the div tag has priority over the normal p tag.

However, if there is a selector that describes ID or class, it will be prioritized regardless of nesting .

Overriding CSS with Important

This is the description method with the highest priority.

CSS
p {
font-size:10px!important;
}

If you add “!important” after the value like this, it will be applied over all other descriptions .

It is very convenient because you can specify CSS without regard to the overall description order or HTML structure, but you must be careful not to overuse it.

important is “top priority”.

If you use it in various places, you will not know which is the real top priority. If a modification occurs in a place where important is involved, it may become an unnecessarily large-scale work.

Don’t abuse it, use it only when you really need it.

Also, please be careful when using it in places where the influence range is large. It is recommended to only use it for pinpoint selectors that do not affect anything else.

Notes on overriding CSS

Overriding CSS is done on many sites.

It can be said that the standard method is to specify the default style first, and then overwrite the individual styles for each part.

However, it is not desirable to repeatedly overwrite blindly.

You may not be able to add CSS smoothly due to the precedence getting in the way .

Don’t just add CSS on the fly, write it systematically.

By doing so, you can create smart CSS that is concise and easy to understand.

Even if there is a correction, it will be enough to overwrite the necessary minimum.

However, when a large-scale site is operated for a long time, it tends to happen that overwrites are overwritten.

If this happens, it will be easier to understand if you use comment tags to note when the postscript was added and what the postscript was for .

It is recommended because it often happens that you do not know what the description is later.

summary

I have already explained how to override the CSS.

It is basic that the description below takes precedence .

By interweaving selectors, element identification, nesting, etc., it will be possible to write efficiently.

However, if you abuse them carelessly, it will become difficult to understand, so please be careful.

Also, please try to keep Important to a minimum.