CSS controls the appearance of HTML. In React, JSX keeps markup close to component logic, but styles in separate CSS files still have to track that markup. A changed class name or structure can leave a component incorrectly styled without producing an error. CSS-in-JS approaches try to bring more of a component’s styling into the same place; plain CSS remains a sound choice when that separation causes little friction. section 7.1 section 7.3.3
A straightforward React setup imports a stylesheet from a component and assigns its classes in JSX. With Vite, the bundler handles the CSS import and emits CSS and JavaScript for the page. Without automatic CSS bundling, configure a CSS loader or reference the stylesheet from HTML. section 7.3.2
A button with variants
Put base, outline, hover, and disabled rules in button.css; import it from Button.jsx. Build the button’s className from a base class, an optional outline class, and a caller-supplied class. A separate app.css rule can customize one instance. For a width supplied as a JavaScript value, use the element’s inline style instead of a fixed stylesheet rule. Keep the JSX and stylesheet names aligned: a misspelling may show up only as an unstyled button. section 7.3.3 section 7.3.5
Listing 7.4 src/button.css with class names
.button {
display: flex;
background: hotpink;
color: white;
border: 2px solid hotpink;
margin: 1em 2em;
padding: 1em 2em;
font-size: 120%;
width: 250px;
cursor: pointer;
gap: 10px;
justify-content: center;
align-items: center;
}
.button__icon {
width: 16px;
height: 16px;
position: relative;
}
.button:hover .button__icon { #1
animation: bounce .2s ease-in-out alternate infinite;
}
@keyframes bounce { #2
from {
left: 0;
}
to {
left: 10px;
}
}
.button--outline {
border-color: hotpink;
background-color: transparent;
color: hotpink;
}
.button:disabled { #3
opacity: 0.5;
pointer-events: none;
}
The button stylesheet shows base and outline classes alongside a hover selector, animation at-rule, and disabled-state rule. section 7.3.3
Choose the styling approach against the problems the project actually has:
- Keep CSS files and class names for familiar syntax, browser-visible classes, full CSS features, and no styling calculation at runtime. Component-level imports can also let a bundler load styles with their components. section 7.3.4
- Watch for global class-name collisions, specificity and output-order surprises, and the manual work of keeping JSX and CSS synchronized. Imported files do not, by themselves, validate class names or remove unused rules. section 7.1.1 section 7.3.5
- Consider CSS Modules, styled-components, inline CSS, or Tailwind CSS when those trade-offs matter more than plain CSS’s familiarity. No approach fits every application or team; CSS files and class names are a reasonable fit for smaller, less dynamic projects. section 7.3.6 section 7.6
Table 7.1 Evaluating CSS methods on several attributes
|
Category and attribute
|
Inline CSS
|
CSS files
|
CSS Modules
|
Styled- components
|
Tailwind CSS
|
|---|---|---|---|---|---|
|
Folder
|
inline
|
classnames
|
cssmodules
|
styled
|
tailwind
|
|
CSS language features
|
|||||
|
Specificity
|
!
|
✗
|
!
|
✓
|
✗
|
|
Collisions
|
✓
|
✗
|
✓
|
✓
|
✓
|
|
Composition
|
✗
|
!
|
✓
|
✓
|
!
|
|
Pseudoclasses
|
✗
|
✓
|
✓
|
✓
|
!
|
|
Pseudoelements
|
✗
|
✓
|
✓
|
✓
|
!
|
|
At-rules
|
✗
|
✓
|
✓
|
✓
|
!
|
|
Conditional rules
|
✗
|
✗
|
✗
|
✓
|
✓
|
|
Dynamic rules
|
✓
|
✗
|
✗
|
✓
|
✓
|
|
Vendor prefixes
|
✗
|
✗
|
✗
|
✓
|
✓
|
|
DX
|
|||||
|
Colocation
|
✓
|
!
|
!
|
✓
|
✓
|
|
Familiarity
|
✓
|
✓
|
✓
|
!
|
✗
|
|
Simplicity
|
!
|
✓
|
!
|
!
|
✗
|
|
Scaling
|
✗
|
✗
|
!
|
✓
|
✓
|
|
Readability
|
!
|
✓
|
✓
|
!
|
✗
|
|
Debugging
|
✓
|
✓
|
!
|
✓
|
!
|
|
Encapsulation
|
✗
|
!
|
!
|
✓
|
✓
|
|
Theming
|
✗
|
!
|
!
|
✓
|
✓
|
|
Web application development
|
|||||
|
Bundle size
|
✗
|
✓
|
✓
|
!
|
!
|
|
Performance
|
✗
|
!
|
!
|
✓
|
✓
|
|
Cacheability
|
✗
|
✓
|
✓
|
!
|
✓
|
|
Code-splitting
|
!
|
!
|
!
|
✓
|
✓
|
|
Maintenance
|
!
|
✓
|
✓
|
✓
|
✗
|
The comparison table makes the trade-offs searchable by concern, including collisions, dynamic rules, debugging, bundle size, and maintenance. section 7.6
