Skip to main content

Use style sheets for presentation instead of inline attributes

Medium
reacttypescriptCSS

What​

This practice is triggered when inline styling or presentation-specific attributes (like style, align, bgcolor, etc.) are directly embedded in the TSX code. Violating code may include inline style definitions that mix presentation with markup.

Why​

Using external or modular style sheets enforces separation of concerns, improves maintainability and allows easier compliance with accessibility guidelines such as WCAG. It also makes managing and updating design consistency across the site simpler.

Fix​

Remove inline style attributes from TSX elements and apply the required styles through an external CSS file or CSS-in-JS solution. Refactor the component by assigning class names and ensure the corresponding CSS rules are defined separately.

Examples​

Example 1:​

Positive​

The component applies presentation using a CSS class instead of inline style attributes, adhering to separation of concerns.

import React from "react";
import "./Button.css"; // External CSS file

const Button = () => {
  return (
    <button className="primary-button">
      Click me
    </button>
  );
};

export default Button;

Negative​

The component uses inline style attributes for presentation, mixing style with markup and potentially violating accessibility guidelines.

import React from "react";

const Button = () => {
  return (
    <button style={{ backgroundColor: "#4CAF50", color: "white", padding: "15px 32px", textAlign: "center", fontSize: "16px" }}>
      Click me
    </button>
  );
};

export default Button;