Vanilla CSS and Scoping

Regular .css files imported into a component file.

Notes

In React, you import a CSS file into a component (import './Header.css'), and the bundler injects it into the page. The import looks component-specific, but the styles are global: a .title rule in Header.css affects every .title element in the app.

JSX uses className instead of class, because class is a reserved word in JavaScript.

What / Why / When

What: Plain CSS files, applied globally.
Why: No tooling or new syntax; designers and CSS-savvy developers can work directly in it.
When: Global styles (resets, typography, CSS variables), small apps, or strict naming conventions like BEM.
Use case: index.css with the app's reset, fonts, and color variables.

Code compare

React

import "./Header.css"; // global, despite being imported hereexport function Header() {  return (    <header className="header">      <h1 className="header__title">Place of Reference</h1>    </header>  );}

Angular styles are scoped by default. Styles in a component's styles or styleUrl apply only to that component's template, through view encapsulation.

Angular

import { Component } from "@angular/core";@Component({  selector: "app-header",  templateUrl: "./header.component.html",  styleUrl: "./header.component.css", // scoped to this component})export class HeaderComponent {}

Angular

/* header.component.css */:host {  display: block; /* styles the <app-header> element itself */}.title {  font-size: 2rem; /* affects only .title inside this component */}

Global styles go in src/styles.css.

Differences and gotchas

This is the biggest styling difference between the frameworks. React CSS is global unless you opt into scoping (CSS Modules, styled-components). Angular CSS is scoped unless you opt out (ViewEncapsulation.None or styles.css).
styleUrl (singular, v17+) takes one file. styleUrls (array) still works.
::ng-deep pierces Angular's scoping but is deprecated. Prefer CSS custom properties to let parents theme children.

Quick reference

React	Angular
`import './X.css'` (global)	`styleUrl: './x.component.css'` (scoped)
`className="x"`	`class="x"`
`index.css`	`styles.css`
—	`:host`, `ViewEncapsulation`