Sandeep vashisth Sandeep vashisth - 5 months ago 23
CSS Question

What are the bad effects of writing duplicate CSS?

I want to know, how CSS get rendered in the browser. what is wrong in writing duplicate CSS property on hover as below.

span.addMedication .two-way-toggle-big
{
display: inline-block;
border: solid 1px orange;
padding: 15px;
font-size: 18px;
font-weight: 100;
cursor: pointer;
width: 70px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
}
span.addMedication .two-way-toggle-big:hover
{
display: inline-block;
border: solid 1px orange;
padding: 15px;
background-color: rgb(247, 157, 32);
color: white;
font-size: 15px;
cursor: pointer;
width: 70px;
margin-right: 5px;
text-align: center;
}

Answer

Technically it's nothing wrong, but you shouldn't do it anyways. CSS is actually thought to cascade, so you would want to work accordingly.

It bloats up your file and your file size, but the biggest problem for me is readability:

In your code I can not see at once what changes on :hover, I have to look at it longer, as with following you know at once:

span {
    display: inline-block;
    border: solid 1px orange;
    padding: 15px;
    font-size: 18px;
    font-weight: 100;
    cursor: pointer;
    width: 70px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
}
span:hover {
    background-color: rgb(247, 157, 32);
    color: white;
}

If you are interested there are lots of different CSS-Style-Guides, that are meant to make your writing more maintainable. Just have a look ;)