Declutter your CSS selection

We often requrie to apply same styling to many different parts of the application. The selection list becomes overwhleming with different tags, classes, ids and actions.

See below for details on how we could simplify your CSS.

Before

input:focus, 
input:hover {
    color: blue;
}

After

input:is(:focus, :hover) {
    color: blue;
}

Before

table tr:hover,
.main-table tr:hover,
.stats-table tr:hover {
    font-weight: bold,
    background-color: #CCC
}

After

:is(table, .main-table, .stats-table) tr:hover {
    font-weight: bold,
    background-color: #CCC
}

Does :is() make your CSS looks neater? Comment below

Photo by Ricardo Viana on Unsplash