PostCSS BEM Linter
A PostCSS plugin that lints CSS to ensure it follows BEM or SUIT naming conventions.
What is PostCSS BEM Linter?
postcss-bem-linter is a PostCSS plugin that validates CSS selectors against BEM-style naming conventions. It helps maintain consistent and scalable CSS architecture by enforcing strict class naming patterns, preventing deviations that can lead to maintainability issues.
Frontend developers and teams using CSS methodologies like BEM or SUIT, particularly those working on large-scale projects where consistent CSS architecture is critical.
Developers choose this plugin for its focused validation of selector conformance, leaving other linting concerns to dedicated tools like stylelint, and for its flexibility with custom pattern definitions and presets for popular methodologies.
Overview
A BEM linter for postcss
Use Cases
Best For
- Enforcing BEM naming conventions in CSS to ensure consistency across a codebase.
- Validating SUIT CSS methodology compliance in component-based projects.
- Defining and enforcing custom CSS naming patterns using regular expressions.
- Linting CSS in large-scale applications where maintainable architecture is a priority.
- Integrating BEM/SUIT validation into existing PostCSS build pipelines.
- Systematically ignoring specific selectors or custom properties via configuration or inline comments.
Not Ideal For
- Projects using CSS-in-JS libraries like styled-components, where CSS is scoped and naming conventions are less relevant.
- Teams adopting utility-first frameworks such as Tailwind CSS, which rely on pre-defined utility classes.
- Small or rapid-prototyping projects where enforcing strict CSS naming rules adds unnecessary overhead.
- Codebases not following any structured CSS methodology, making the plugin's validation irrelevant.
Pros & Cons
Pros
Enforces strict naming conventions for BEM and SUIT with preset patterns, ensuring consistent and scalable CSS architecture as highlighted in the README's support for popular methodologies.
Allows defining custom naming conventions using regex or functions, enabling teams to tailor linting to their specific needs, as shown in the configuration examples for component names and selectors.
Provides a weak mode where only initial selector sequences must match conventions, offering a balance between strictness and flexibility for complex selectors, detailed in the conformance tests section.
Seamlessly integrates into PostCSS build pipelines, compatible with tools like gulp-postcss and postcss-reporter for easy setup, as mentioned in the installation and use sections.
Cons
Setting up custom patterns requires regex expertise and careful definition, which can be error-prone and time-consuming, as evidenced by the detailed regex examples and multiple configuration options in the README.
Only validates selector conformance, leaving other CSS aspects like properties or values to additional tools like stylelint, requiring a multi-tool setup for comprehensive linting, as stated in the philosophy.
May have problems with CSS preprocessors like Sass or Less, especially with concatenated files, necessitating workarounds like special comments, as noted in the multiple definitions section referencing issue #57.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.