Here is a rewritten version of the article in a unique voice, staying true to the core ideas:
The Evolution of CSS: How Linting Can Save the Day
The rapid growth of CSS in recent years has been nothing short of remarkable. While some features have reduced our reliance on JavaScript for common interactions, others have updated the core concept of the box model. However, as the language evolves, so do its best practices. CSS has always presented challenges, and some shortcomings were due to developers not respecting the language enough to learn it properly. Luckily, we’ve moved on from the struggles of centering elements to a new era of challenges. Modern CSS has reshaped its box model with new properties and values to support the fluidity our UIs require. But this modernization has also introduced a range of “gotchas” that have inspired a set of defensive CSS best practices.
The Power of Linting
In the world of JavaScript, linting is a requirement, and many tools include ESLint by default with a new project. While linting in CSS is not quite as ubiquitous, there’s a reliable library looking to change that: Stylelint. In this article, we’ll explore using Stylelint plugins to help us adopt and enforce defensive and logical CSS practices.
Defensive CSS: The Key to Resilient UIs
Defensive CSS is a set of best practices for creating content-proof layouts. It’s about writing CSS that’s future-proof, resulting in fewer bugs in user interfaces. Let’s explore a few of the many defensive CSS recommendations to see how they can make a product’s UI resilient to its variable content.
Background Repeat
When using background images, it’s easy to forget how they will behave on large screens. By default, background images will repeat. As a defensive habit, include a background-repeat property on the container.
Custom Property Fallbacks
Using custom properties in CSS has become quite common. But what’s not common is linting or pre-defining custom property names. As a result, there’s no real certainty that a custom property exists at the time it’s used. Because of this, it’s a defensive habit to include fallback values for custom properties.
Flex Wrapping
Since CSS Flexbox gained wide support, its most frequent issue concerns items overflowing their container. This is because, by default, flex items do not wrap to a new row when they reach the edge of their container. To prevent this, and to ensure flex items wrap to new lines as needed, always include a flex-wrap property on every flex container.
Vendor Prefix Grouping
It’s not a good practice to combine selectors for multiple vendors. If one selector fails, the entire selector will fail, and none of the styles will be applied. As a defensive habit, split all vendor-prefixed selectors into their own declaration.
Linting Defensive CSS with Stylelint
Stylelint and linting in general do so much heavy lifting for us. Without them, we’d be left to remember every detail, property, value, and formatting rule there is. Luckily, we can extend Stylelint to remember some of these rules for us. To do this, we will install stylelint-plugin-defensive-css.
Logical CSS: The Future of UI Design
Logical CSS redefines the CSS box model to support a growing intersection of users, devices, and cultures. It provides a set of properties, values, and units that are no longer tied to physical directions on a screen, but the logical flow of content. With logical CSS, our UIs can support fluid content regardless of its direction or writing mode.
Linting Logical CSS with Stylelint
Again, linting can not only help to enforce best practices, but it can also ease the learning curve of new properties and values. Logical CSS introduces a new paradigm regarding how we think about x- and y-axes and the flow of content. We can use Stylelint to find and fix physical CSS and introduce us to logical CSS continuously and gradually.
Real-World Experience
In the world of frontend development, it’s easy to greet new features with a sense of skepticism. It’s often warranted. Even in this article, we’ve mentioned browser support multiple times. Now may be a good time to explore how using Stylelint to enforce defensive and logical CSS has looked in a production environment.
By using Stylelint to lint our styles, we can ease the adoption of new patterns and best practices. We can make our UIs resilient to dynamic and variable content, and to dynamic and variable users. If we’re familiar with linting our JavaScript, then we’re familiar with the benefits of doing so. As CSS rapidly evolves to become far more complex and powerful than it’s ever been, there’s no reason to not treat it with the same respect and lint it accordingly.