From the course: CSS: Refactoring Style Sheets

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

General refactoring principles

General refactoring principles - CSS Tutorial

From the course: CSS: Refactoring Style Sheets

Start my 1-month free trial

General refactoring principles

- [Instructor] CSS Refactoring is not a one-size-fits-all practice. Every developer and every team have their own preferences and best practices they use to improve and simplify their own code. That said, there's some general principles that most developers can agree with. First, avoid specificity. Use general CSS rule selectors over specific ones to ensure reuse and avoid writing individual rules for each little piece of displayed content. This is also a performance issue. Browsers read your selectors from right to left, meaning the quicker you can narrow down the element you are looking for the better, i.e. body main section .cta-box .cta-button a will read as give me every anchor that is also in this .cta-button container that is also in the .cta-box container that is also in the section that is in the main that is in a body, etc. Whereas .cta-button a will produce the exact same result, just with a lot less queries. Number two, use the cascade. The browser reads the style sheet…

Contents