https://github.com/darkzarich/stylelint-config-two-dash-bem

BEM Convention rule enforcing Two Dashes style for stylelint.
https://github.com/darkzarich/stylelint-config-two-dash-bem

Last synced: about 5 hours ago
JSON representation

BEM Convention rule enforcing Two Dashes style for stylelint.

• Host: GitHub
• URL: https://github.com/darkzarich/stylelint-config-two-dash-bem
• Owner: Darkzarich
• License: mit
• Created: 2024-06-21T00:11:46.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T19:06:13.000Z (5 months ago)
• Last Synced: 2024-11-08T18:51:03.585Z (10 days ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stylelint-config-two-dash-bem

[![NPM Version](https://img.shields.io/npm/v/stylelint-config-two-dash-bem)](https://www.npmjs.com/package/stylelint-config-two-dash-bem)

[BEM Convention](https://en.bem.info/) zero dependency rule enforcing [Two Dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) for [Stylelint](https://stylelint.io/).

## Why

I was looking for a [Two Dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) BEM rule for Stylelint and couldn't find one. There are great options like [stylelint-selector-bem-pattern](https://github.com/simonsmith/stylelint-selector-bem-pattern) but that one is a more broad solution and I wanted to make it **as simple as possible** for my needs.

If you use Two Dashes style BEM in your project and you want **just** the rule, nothing else, this is the what you need.

## Installation

```bash

npm install stylelint-config-two-dash-bem --save-dev

```

## Usage

Add the following to your `.stylelintrc` file:

```json

{

  "extends": ["stylelint-config-two-dash-bem"]

}

```

## Example

```css

/* Good */

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

.block__elem-name--mod-name--mod-val {}

.block {

  &__element {

    &--modifier {

    }

  }

}

/* Error */

.block_element {}

.main {

  &_content {}

  &-content {}

}

```