CSS Styling, CSS Modules, CSS-in-JS & Sass

CSS Styling — className and inline styles

Use className to attach CSS classes from a .css file. Inline style={{ }} accepts a JavaScript object with camelCase properties.

Real-life example: className is wearing a school uniform (external CSS). Inline style is putting on one sticker for a single day.

import "./App.css";

function Hero() {
  return (
    <div className="hero">
      <h1 style={{ color: "#0891b2", fontSize: "2rem" }}>Rishtaara</h1>
    </div>
  );
}

.hero {
  padding: 2rem;
  text-align: center;
  background: #f0fdfa;
}

CSS Modules

Import styles as an object: import styles from './Button.module.css'. Class names are scoped to the component — no global clashes.

Real-life example: CSS Modules are like name tags on clothes at a hostel laundry — your shirt never gets mixed with someone else's.

import styles from "./Button.module.css";

function Button({ children }) {
  return <button className={styles.primary}>{children}</button>;
}

.primary {
  background: #0891b2;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
}

CSS-in-JS (brief)

Libraries like styled-components let you write CSS inside JavaScript template strings. Popular in some teams; not required for beginners.

Real-life example: CSS-in-JS is like writing recipe and serving dish on the same card — convenient, but you need the right tool installed.

// npm install styled-components
import styled from "styled-components";

const Button = styled.button`
  background: #0891b2;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
`;

function App() {
  return <Button>Join Rishtaara</Button>;
}

Sass note

Sass (SCSS) adds variables, nesting, and mixins. Vite supports .scss files out of the box — import them like normal CSS.

Real-life example: Sass is a neat recipe notebook with shortcuts; the browser still eats plain CSS after compilation.

• Rename file to .scss and import in your component
• Use $variables for brand colors
• Nest selectors for cleaner component-scoped styles