Khoi Pro

For many years, SCSS has been the go-to preprocessor for many developers. Its syntax, features, and ease of use have made it a popular choice. However, as the web development landscape continues to evolve, so too do our toolchains. In this post, I’ll delve into why our team decided to make the switch from SCSS to postCSS, and the benefits we’ve experienced.

Why using postCSS?

postCSS is a powerful tool that allows you to transform your CSS with JavaScript plugins. This flexibility offers a number of advantages over traditional CSS preprocessors like SCSS:

1. Modular Architecture:
   • Plugin-Based System: postCSS operates on a plugin-based system. This means you can choose and combine specific plugins to tailor your CSS workflow to your exact needs.
   • Granular Control: You can introduce new features or modify existing ones without being tied to a monolithic preprocessor.
2. Performance:
   • Optimized Output: postCSS can generate highly optimized CSS, reducing file size and improving load times.
   • Faster Build Times: By leveraging the power of JavaScript, postCSS can often outperform traditional preprocessors in terms of build speed.
3. Future-Proof:
   • Adaptability: As CSS evolves, postCSS can easily adapt to new syntax and features.
   • Community-Driven: The postCSS community is active and constantly innovating, ensuring that the tool stays relevant.
4. Customizability:
   • Tailored Workflows: With postCSS, you can create custom plugins to automate repetitive tasks and enforce coding standards.
   • Flexible Syntax: You can use any CSS syntax you prefer, whether it’s standard CSS, SCSS, or even a custom syntax.

Transitioning from SCSS to postCSS

While the transition to postCSS might seem daunting at first, it’s actually quite straightforward. Here are some tips to help you make a smooth transition:

1. Identify Essential Features: Determine which SCSS features you rely on most.
2. Find Equivalent postCSS Plugins: Research and choose plugins that offer similar functionality.
3. Start Small: Begin by migrating a small part of your project to postCSS to gain experience.
4. Leverage the Community: The postCSS community is a valuable resource for learning and troubleshooting.

Which postCSS plugins we use?

postcss-preset-env

• Future-Proofing: Automatically transpiles modern CSS features into older, more widely supported syntax.
• Simplifies Development: Enables us to write CSS using the latest features without worrying about browser compatibility.

We could use CSS variables like that when enable custom-media-queries feature.

:root {
  --primary-color: #ff0000;
  --secondary-color: #3f3f3f;
}

/

The second thing is how we use custom media query:

@custom-media --max-mobile (max-width: 575px);
@custom-media --s (min-width: 480px);
@custom-media --sm (min-width: 600px);

.hero {
  flex-direction: column;

  @media (--sm) {
    flex-direction: row-reverse;
  }
}

The third thing is nesting class:

.parent {
  & .child {}
}

postcss-mixins

• Code Reusability: Allows us to define reusable CSS blocks that can be included in other parts of our stylesheets.
• Improved Maintainability: Reduces code duplication and simplifies updates.

Code sample:

@define-mixin abs-full {}
@define-mixin fixed-full {}
@define-mixin flex-center {}
@define-mixin image-overlay {}

postcss-import

• Modular CSS: Enables us to break down our CSS into smaller, more manageable modules.
• Better Organization: Improves code organization and maintainability.

@import url('blocks/index.css');

Conclusion

By embracing postCSS and these essential plugins, we’ve been able to streamline our CSS workflow, improve performance, and future-proof our projects. While SCSS is a solid choice, postCSS offers a more flexible and powerful approach to CSS development. If you’re looking to take your CSS to the next level, we highly recommend giving postCSS a try.