How to lint for a harry robert's BEM convention with stylelint?

ONLINECAST

2 min read

·

07-10-2024

12

0

Share

Keeping Your CSS in Line: Linting for Harry Roberts' BEM with Stylelint

Tired of CSS that's a tangled mess? The Block, Element, Modifier (BEM) naming convention, popularized by Harry Roberts, offers a clear and consistent way to structure your CSS. But keeping your code compliant with BEM principles can be tricky. Enter Stylelint, a powerful tool that helps you enforce coding standards, including BEM.

The Problem:

BEM dictates that class names should follow a specific pattern: block__element--modifier. Maintaining this structure manually is prone to errors, especially on larger projects.

The Solution:

Stylelint, with its array of plugins, allows you to automate the process of enforcing BEM rules. This means you can catch mistakes early on and ensure your CSS remains organized and maintainable.

Here's how to get started:

1. Install Stylelint:

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

   • stylelint-config-standard provides a set of standard best practices for CSS.
   • stylelint-config-bem is crucial for enforcing BEM principles.

2. Create a Stylelint Configuration File:

   Create a .stylelintrc.json file at the root of your project:

   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-bem"
     ],
     "rules": {
       "selector-class-pattern": "^[a-z]+(?:__[a-z]+)?(?:--[a-z]+)?{{content}}quot;,
       "selector-max-type": [
         2,
         {
           "ignore": ["child", "descendant"]
         }
       ]
     }
   }
   

   • extends: This line imports the standard and BEM configuration rules.
   • rules:
     • selector-class-pattern: This rule ensures your class names adhere to the BEM pattern. It allows for block, element, and modifier components, ensuring a consistent format.
     • selector-max-type: This rule restricts the use of descendant selectors (>, +, ~) to a maximum of two levels. This encourages a flatter CSS structure, promoting readability and maintainability.

3. Integrate with Your Workflow:

   • Command Line: Run stylelint "path/to/your/css/files" to lint specific files or folders.
   • Build Tools: Integrate Stylelint with your build tools like Webpack, Gulp, or Grunt to automatically check your CSS during development.

Additional Tips:

• Customization: The stylelint-config-bem plugin provides granular options for customizing BEM rules. For instance, you can specify how many elements and modifiers a block can have.
• Linter Extensions: Utilize browser extensions like Stylelint for Visual Studio Code to see linting errors directly within your editor.
• Rule Variations: Explore various other Stylelint rules like declaration-block-no-duplicate-properties to further improve your code quality.

Benefits of Using Stylelint for BEM:

• Consistency: Enforces a uniform naming convention across your project.
• Readability: Makes CSS easier to understand and navigate.
• Maintainability: Simplifies the task of modifying or extending existing styles.
• Collaboration: Promotes a shared understanding of CSS structure within your team.

Beyond the Basics:

While this guide provides a starting point, the world of Stylelint and BEM is vast. Consider researching additional plugins and configurations to fine-tune your linting process to match your project's specific needs.

By embracing Stylelint and BEM, you can elevate your CSS to new heights of organization and efficiency. Happy coding!