How to make to lint BEM-style using stylelint and stylelint-selector-bem-pattern?

2 min read 07-10-2024

How to make to lint BEM-style using stylelint and stylelint-selector-bem-pattern?

Taming the BEM Beast: Linting Your Styles with Stylelint and stylelint-selector-bem-pattern

Block, Element, Modifier (BEM) is a popular naming convention for CSS classes that promotes organization and scalability. But even with a clear methodology, maintaining consistency can be challenging, especially on larger projects. This is where stylelint and its plugin stylelint-selector-bem-pattern come in. This powerful duo can help you enforce BEM conventions, ensuring your styles are clean, maintainable, and easy to understand.

The Problem: BEM Chaos

Let's imagine you're working on a website with a component called "product-card." Without strict guidelines, your CSS might look like this:

/* Unorganized and potentially inconsistent */
.product-card {
  /* ... */
}

.product-card-title {
  /* ... */
}

.product-card-image {
  /* ... */
}

.product-card-price {
  /* ... */
}

.product-card-sale { 
  /* ... */
}

This code is functional, but it lacks structure and can be difficult to maintain. Different developers might use inconsistent naming, making it harder to understand and modify the styles over time.

The Solution: Stylelint and stylelint-selector-bem-pattern

Stylelint is a powerful linting tool for CSS. It allows you to define rules and automatically check your CSS code for errors, potential problems, and style inconsistencies.

stylelint-selector-bem-pattern is a plugin for stylelint that specifically enforces BEM naming conventions. It can detect violations of your chosen BEM pattern and highlight them for you, ensuring your code remains consistent.

Here's how to set it up:

Install the necessary packages:

npm install -D stylelint stylelint-config-standard stylelint-selector-bem-pattern

Create a .stylelintrc.json file:

{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    "selector-bem-pattern": [
      true,
      {
        "componentSelectors": [
          "block",
          "block__element",
          "block--modifier"
        ]
      }
    ]
  }
}

Run Stylelint:
```
npx stylelint "path/to/your/css/files"
```

This setup will enforce the following BEM pattern:

block: The main component (e.g., "product-card").
element: A child element within the component (e.g., "product-card__title").
modifier: A variation or state of the component or element (e.g., "product-card--sale").

Benefits of Linting Your BEM Styles:

Consistency: Stylelint ensures all developers follow the same BEM naming conventions, making the codebase easier to navigate and maintain.
Scalability: As your project grows, linting prevents inconsistencies and messy CSS, keeping the code manageable.
Code Quality: By identifying potential errors and style violations early on, you can catch problems before they become bigger issues.
Improved Collaboration: Linting promotes consistency, making it easier for developers to work together on a shared codebase.

Going Beyond the Basics

stylelint-selector-bem-pattern is highly customizable. You can tailor the plugin to your specific needs, for example:

Custom patterns: Define alternative BEM naming conventions if your project requires them.
Exclude selectors: Specify certain selectors that should not be linted (e.g., vendor-specific prefixes).
Combine with other rules: Use Stylelint's wide range of rules to enforce other best practices, like indentation, spacing, and unit consistency.

Conclusion

Linting your BEM styles with Stylelint and stylelint-selector-bem-pattern is a valuable step towards building more robust and maintainable CSS. It's a small investment of time that can save you significant headaches down the line. Embrace the power of linting, and watch your BEM styles become more consistent, predictable, and easier to manage.