Comparing Styling Methods in 2020

Adebiyi Adedotun Lukman's Smashing Magazine article comprehensively explores various CSS styling methods within the Next.js framework. While the context is Next.js, the discussed techniques are widely applicable beyond it, proving useful for diverse web development projects.

Here's a summary of popular styling approaches and my perspective:

• Plain CSS: The simplest and often best approach if feasible. Its refreshing lack of build tooling ensures longevity and maintainability. The only drawback is the absence of nested media queries within selector blocks.

• Sass: A mature and widely adopted CSS preprocessor. Its integration with various tools is seamless, simplifying tasks like file concatenation, minification, and cache busting, which are eventually necessary regardless of the chosen method.

• Less & Stylus: Surprisingly less prevalent despite their Node.js compatibility and rich feature sets. While perfectly viable, Sass's broader adoption, active development, and improved Node.js support make it a more compelling choice.

• PostCSS: Its modularity, while offering flexibility, also necessitates assembling desired features manually, leading to inconsistencies across projects. Furthermore, its inability to preprocess certain modern CSS features (like custom properties) is a limitation. However, its Autoprefixer component remains valuable for browser compatibility.

• CSS Modules (PostCSS-based): A highly effective solution for component-based architectures. By scoping CSS to individual components, it significantly improves maintainability. It’s also compatible with Sass, combining the benefits of both.

• CSS-in-JS: Primarily associated with React (though applicable to other frameworks like Vue, Svelte, and Angular), this approach offers automatic scoping and allows incorporating props into styling decisions. Frameworks like styled-components, styled-jsx, and Emotion provide various implementations. While I find Sass and CSS Modules sufficient for my React projects, the advantages of CSS-in-JS, particularly for design systems, are undeniable.

• Utility-First CSS: This method prioritizes small CSS files and consistent styling through a large number of utility classes. However, the resulting markup can become cluttered and difficult to read and refactor. Despite its drawbacks, its efficiency appeals to many developers.

For further insights, check out the recent Syntax FM podcast discussion on this topic.

The above is the detailed content of Comparing Styling Methods in 2020. For more information, please follow other related articles on the PHP Chinese website!