CSS Stylesheets and Global Class Names0%
CSS Modules for Scoped Component Styling

CSS Stylesheets and Global Class Names

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

CSS Stylesheets and Global Class Names

1. Traditional CSS in Modern React

The simplest way to style React components is writing standard CSS in external .css files and importing them directly into your JavaScript files.

When you import a stylesheet via Vite or Webpack:

JSX
import './App.css';

The bundler extracts the CSS, injects it into a <style> tag in development, and bundles it into an optimized, minified .css file in production.

2. Using Global Class Names

Once imported, you apply styles using the className attribute:

CSS
/* src/styles/cards.css */
.course-card {
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.course-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
 
.course-card .card-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
}
JSX
// src/components/CourseCard.jsx
import React from 'react';
import './cards.css';
 
export default function CourseCard({ title, children }) {
return (
<div className="course-card">
<h3 className="card-title">{title}</h3>
<div className="card-body">{children}</div>
</div>
);
}

3. The Major Danger: Global Scope Collisions

While importing plain CSS files into components feels modular, standard imported CSS files are completely global!

Importing import './cards.css' inside CourseCard.jsx does not restrict the .card-title class to CourseCard. If another developer creates UserProfile.jsx and imports profile.css with a .card-title class, both rules conflict globally across the entire application:

Output
Component A imports: .card-title { color: blue; }
Component B imports: .card-title { color: red; font-size: 20px; }
Result: Cascading conflict! Whichever CSS rule loads last overrides the other!

4. Best Practices for Plain CSS in React

If using traditional CSS stylesheets without CSS Modules or Tailwind:

  • Follow BEM (Block-Element-Modifier): Use strict naming prefixes like .msk-course-card, .msk-course-card__title, .msk-course-card--highlighted to prevent global name clashes.
  • Global Design Tokens in index.css: Place CSS variables (:root { --primary-color: #0284c7; }), base resets, and typography in index.css.
  • Prefer CSS Modules or Tailwind CSS for Enterprise Apps: Use modern scoped tools to eliminate global namespace collisions entirely.
Interactive Quiz

Practice Quiz

Question 1
How do you import an external CSS file into a React component when using Vite?
Question 2
Why can importing plain CSS files across many components lead to bugs in large applications?
Question 3
What CSS methodology uses Block, Element, and Modifier naming to prevent namespace collisions?
Question 4
Where are global resets and CSS root variables typically imported in a Vite React project?
Question 5
Does standard external CSS support pseudo-classes like :hover and media queries?
Next Lesson

CSS Modules for Scoped Component Styling

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Inline Styles and Style ObjectsCSS Modules for Scoped Component Styling

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext