Adopting Best Practices for Inline Styles in JavaScript

{
  "title": "Adopting Best Practices for Inline Styles in JavaScript",
  "description": "Define clear guidelines for using inline styles in JavaScript to ensure clarity and maintainability in UI development.",
  "category": "JavaScript Cursor Rules",
  "rules": [
    {
      "name": "Limit Use of Inline Styles",
      "description": "Avoid overusing inline styles to maintain code readability and ease of maintenance. Reserve inline styles for dynamic styling that cannot be achieved through external stylesheets.",
      "severity": "warning",
      "pattern": "element.style.{property} = {value};",
      "condition": "if (property in ['color', 'backgroundColor', 'fontSize', 'margin', 'padding'])"
    },
    {
      "name": "Use CamelCase for CSS Properties",
      "description": "Ensure CSS property names in JavaScript are written in camelCase to prevent syntax errors and maintain consistency.",
      "severity": "error",
      "pattern": "element.style.{property} = {value};",
      "condition": "if (property.includes('-'))"
    },
    {
      "name": "Encapsulate Reusable Styles",
      "description": "Encapsulate reusable styles in JavaScript objects or constants to promote consistency and reduce redundancy.",
      "severity": "info",
      "pattern": "const {styleName} = {styles};",
      "condition": "if (styles && typeof styles === 'object')"
    },
    {
      "name": "Separate Styles from Component Logic",
      "description": "Define styles in separate files or at the top of your component files to improve maintainability and readability.",
      "severity": "info",
      "pattern": "import {styles} from './styles';",
      "condition": "if (styles && typeof styles === 'object')"
    },
    {
      "name": "Avoid Complex Inline Styles",
      "description": "Refrain from using inline styles for complex styling. Utilize external stylesheets or CSS-in-JS libraries for better separation of concerns.",
      "severity": "warning",
      "pattern": "element.style = {styles};",
      "condition": "if (Object.keys(styles).length > 5)"
    }
  ]
}