Improve your CSS with these 5 Principles dev.to3 years ago in #Dev Love257

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS? As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line. Fixing issues may become harder, duplicated code, complex override chains and use of !important, leftover / unused code (removed elements or features), code that is hard to read, etc. Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We’re going to look at the five simple and very effective principles that will take your CSS to the next level. Naming principle “There are only two hard things in Computer Science: cache invalidation and naming things.” — Phil Karlton Properly naming and structuring your CSS selectors is the first step to making your CSS more readable, structured and cleaner. Establishing rules and constraints in your naming convention makes your code standardized, robust and easier to understand. This is why concepts like BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object Oriented CSS) are popular among many frontend developers. Low specificity principle Overriding CSS properties is very useful, but things can go out of hand pretty quickly on more complex projects. Overriding chains can get really long and complex, you might be forced to use !important to solve the specificity issue and you could get really easily lost when debugging or adding new features. /* Low-specificity selector */ .card {} /* High-specificity selectors */ .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {} Browser and specificity One of the benefits of following the low specificity principle is performance. Browsers parse the CSS from right to left. Let’s take a look at the following example: Browsers parse the selector like this: Find all img elements on the page Keep selected elements that are the descendants of .card class Keep selected elements that are the descendant of .blog-list class You can see how high-specificity selectors impact performance, especially when we need to globally select generic elements like div, img, li, etc. Using the same level of specificity By using low specificity CSS class selectors in combination with BEM or one of the other naming principles mentioned in the previous section, we can create a performant, flexible and understandable code. Why use CSS classes? We want to keep the same level of specificity, stay flexible and be able to target multiple elements. Element selectors and id selectors do not offer the flexibility that we need. Let’s rewrite our previous example using BEM and keeping specificity low. /* Low-specificity selector */ .card {} /* Fixed high-specificity selectors */ .card__title {} .blogList__image {} .blogList__title–featured {} .blogList__img–special {} You can see how these selectors are simple, understandable and can be easily overridden and extended if needed. And by keeping them low-level (a single class), we are guaranteed optimal performance and flexibility. DRY Principle DRY (Don’t repeat yourself) principle can be also applied to CSS. Duplicated code in CSS can cause code bloat, unnecessary overrides, reduce maintainability, etc. This issue can be fixed by structuring the code appropriately and having high-quality documentation. Storybook is a great free tool that enables you to create an overview of available frontend components and write high-quality documentation. /* Without DRY Princple */ .warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; } Let’s refactor…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply