Developing Vue Component Styles with BEM Methodology

{
  "title": "Developing Vue Component Styles with BEM Methodology",
  "description": "Ensure that Vue components utilize the BEM (Block Element Modifier) methodology for CSS styling to enhance clarity and maintainability.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-bem-class-naming",
      "description": "Enforce BEM naming conventions for class names in Vue components.",
      "severity": "error",
      "pattern": {
        "type": "class",
        "pattern": "^(?!.*(--|__)).*$"
      },
      "message": "Class names should follow BEM conventions: 'block', 'block__element', or 'block--modifier'."
    },
    {
      "id": "vue-bem-structure",
      "description": "Ensure that Vue component templates adhere to BEM structural principles.",
      "severity": "warning",
      "pattern": {
        "type": "template",
        "pattern": "<[^>]+class=\"[^\"]*[^-]--[^-][^\"]*\"[^>]*>"
      },
      "message": "Modifiers should be applied to the block or element they modify, following the BEM structure."
    },
    {
      "id": "vue-bem-scoped-styles",
      "description": "Encourage the use of scoped styles in Vue components to prevent global CSS conflicts.",
      "severity": "info",
      "pattern": {
        "type": "style",
        "pattern": "<style(?!.*scoped).*?>"
      },
      "message": "Consider using scoped styles to encapsulate component-specific styles and avoid unintended global effects."
    },
    {
      "id": "vue-bem-preprocessor-nesting",
      "description": "Recommend using CSS preprocessors like Sass or Less to facilitate BEM class nesting.",
      "severity": "info",
      "pattern": {
        "type": "style",
        "pattern": "<style(?!.*lang=\"(scss|sass|less)\").*?>"
      },
      "message": "Using a CSS preprocessor can enhance maintainability and readability when implementing BEM methodology."
    }
  ]
}