Which one of these CSS code practices is considered better?
A - concise and rewritten:
@media only screen and (min-width: 480px) and (max-width: 960px) {
h1, h2, .header, .widget, .copyright {
position: static;
width: 100%;
height: auto;
/* additional styles may be added here */
}
.copyright {position: relative;}
}
B - repetitive:
@media only screen and (min-width: 480px) and (max-width: 960px) {
h1, h2, .header, .widget {
/* CLASS .copyright is missing to prevent redundancy */
position: static;
width: 100%;
height: auto;
/* additional styles may be added here */
}
.copyright {position: relative; width: 100%; height: auto; /* more of the SAME styles could be added */}
}
Could rewriting the code have any negative implications (as shown in Exhibit A)? Could it lead to slower rendering or compatibility issues with older browsers? Despite being an easier approach, something about it doesn't feel quite right.