This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Overriding style.basic.css

#20978
Ernest MarcinkoErnest Marcinko
Keymaster

Hi,

The order of CSS files does not matter when the browser renders them. The only thing that matters is the CSS rule specificity. There are basically 4 groups of CSS rules, each with higher specificity than the other (elements & pseudo, class, ID and inline). For example, a CSS rule that includes an element ID, will override another rule that only targets the same element via it’s class, no matter the order. The order only matters with rules with the same specificity.
This is also a cause of many CSS conflicts, such as parent elements having higher specificity rules will apply on their child nodes – for example a shortcode prints out some elements, styled in a specific way, but if the parent element (where the shortcode is placed) has a higher specificity rule, it will apply instead. To overcome this issue, developers use IDs, and very high specificity CSS rules, to avoid any possible styling conflicts across themes and plugins.

Using !important will save you the headache of constructing higher specificty rules to override the existing ones, which can be very lengthy and could take a lot of time. Since you only want to override some aspects, using !important is not a bad practice in this case whatsoever. I highly suggest keeping them as they are, for the best possible compatibility.