ReactJS Styling in React Syllabus

How are mixins written in LESS?

Any class or id ruleset can be reused as a mixin by referencing it: define .rounded { border-radius: 8px; } and include with .rounded(); inside another selector. Parametric mixins accept arguments: .border(@w) { border: @w solid; }.

What is Stylus (CSS preprocessor)?

An expressive, minimalist CSS preprocessor written in Node.js. Its most notable feature is optional/omittable syntax: colons, semicolons, braces, and even the class delimiters can be dropped, relying on indentation and whitespace.

How do Stylus variables and its optional syntax look?

Variables need no sigil: primary = #3498db. Rules can drop braces/colons/semicolons: body color primary font-size 16px Stylus infers structure from indentation, making it the most flexible-syntax preprocessor.

Classify the main CSS preprocessors and their language/runtime.

Sass (Ruby originally, now Dart/LibSass; uses $), LESS (JavaScript-based; uses @), and Stylus (Node.js-based; optional syntax, no sigil). All add variables, nesting, mixins, and functions and compile down to plain CSS.

What is Bootstrap?

A widely used open-source CSS framework providing a responsive 12-column grid, pre-built components (buttons, navbars, modals, cards), and utility classes. Styled via predefined class names rather than writing custom CSS.

How many columns does Bootstrap's grid system use, and how is it structured?

Bootstrap's grid uses 12 columns. Layout is built with .container > .row > .col-* elements; column classes like col-md-6 span a fraction of the 12 columns at given breakpoints, so col-md-6 spans half the row on medium+ screens.

What is the recommended way to use Bootstrap with React?

Use React-Bootstrap or Reactstrap, which reimplement Bootstrap components as actual React components (e.g. <Button variant="primary">) without jQuery, giving idiomatic props and state instead of raw class strings.

List Bootstrap's default responsive breakpoint tiers.

Extra small (xs, <576px, no infix), small (sm, ≥576px), medium (md, ≥768px), large (lg, ≥992px), extra large (xl, ≥1200px), and extra extra large (xxl, ≥1400px) in Bootstrap 5.

What is Material-UI (MUI)?

A comprehensive React component library implementing Google's Material Design. It provides ready-made, accessible, themeable components (Button, TextField, Grid, etc.) and, since v5, uses Emotion (styled-engine) for styling, replacing JSS used in v4.

What styling engine does Material-UI (MUI) v5 use, and what did it use before?

MUI v5 uses Emotion as its default styling engine (with an option for Styled-Components). MUI v4 used JSS with the makeStyles/withStyles APIs.

What is the `sx` prop in MUI?

A shortcut prop available on MUI components for applying one-off theme-aware styles via an object, e.g. <Box sx={{ mt: 2, color: 'primary.main' }} />. It supports theme tokens, responsive values, and shorthand spacing.

How does MUI's `styled` utility differ from creating a plain styled component?

MUI's styled (from @mui/material/styles) is theme-aware by default: the callback receives ({ theme }) so you can reference theme.spacing, theme.palette, and breakpoints, and it integrates with MUI's component slots and variants.

What is Tailwind CSS?

A utility-first CSS framework where you compose designs by applying small single-purpose classes (e.g. flex, pt-4, text-center, bg-blue-500) directly in markup, rather than writing custom CSS or using pre-built components.

What does 'utility-first' mean, and how does Tailwind differ from Bootstrap?

Utility-first means styling by combining atomic classes each doing one thing (padding, color, flex) directly in HTML. Bootstrap is component-first, shipping pre-designed components; Tailwind gives low-level primitives so you build custom designs without leaving your markup.

How does Tailwind keep the production CSS bundle small?

Tailwind scans your source files (the content paths in tailwind.config) and generates only the utility classes you actually use, purging/tree-shaking all unused classes. This just-in-time compilation yields a very small final CSS file.

How are responsive styles written in Tailwind CSS?

Prefix a utility with a breakpoint name and colon: sm:, md:, lg:, xl:, 2xl:. For example <div class="text-sm md:text-lg"> is small text by default and large on medium+ screens. Tailwind is mobile-first, so unprefixed utilities apply to all sizes.

What file configures Tailwind's design tokens and where do custom colors go?

tailwind.config.js (or .ts). Custom design tokens live under theme (or theme.extend to add without replacing defaults), e.g. theme.extend.colors.brand = '#123456', which then generates classes like bg-brand.

What are the two main categories of React styling approaches?

1) CSS-based/traditional: plain CSS, CSS Modules, and preprocessors (SASS, LESS, Stylus) plus utility frameworks (Tailwind, Bootstrap). 2) CSS-in-JS: styles written in JavaScript (Styled-Components, Emotion, JSS). They differ in scoping, runtime cost, and colocation.

What problem do CSS Modules and CSS-in-JS both solve?

Global namespace collisions. Both automatically scope styles to a component by generating unique/hashed class names, so styles in one component cannot unintentionally leak into or override another.

What is a key trade-off of runtime CSS-in-JS (e.g. Styled-Components) versus utility CSS (Tailwind)?

Runtime CSS-in-JS generates and injects styles as JS executes, adding runtime overhead and bundle weight but enabling dynamic prop-driven styles. Utility CSS like Tailwind ships static, pre-purged CSS with near-zero runtime cost but less dynamic flexibility.

Compare compile-time variables (Sass/LESS) with CSS custom properties for dynamic theming.

Sass/LESS variables are resolved at compile time and are fixed in the output CSS, so they cannot change at runtime. CSS custom properties (--var) are live and can be updated at runtime via JavaScript or media queries, making them better for dynamic theming.

Which styling libraries share the `ThemeProvider` + `theme` prop pattern?

Styled-Components and Emotion both use a ThemeProvider component and expose the theme via props.theme (or theme in the styled callback). MUI also provides its own ThemeProvider building on Emotion.

What is the purpose of the `createGlobalStyle` helper in Styled-Components?

It creates a component that injects global CSS (resets, body/html styles, font-face) into the document rather than scoping it to one component. You render <GlobalStyle /> once near the app root.

In Emotion, what is the difference between the object-style and string-style css API?

Object style uses a JS object with camelCased properties: css({ fontSize: 12 }). String style uses a tagged template with normal CSS syntax: css`font-size: 12px;`. Both produce a class name; object style avoids parsing template strings and enables easy composition.

What is `@apply` in Tailwind CSS used for?

@apply lets you inline existing Tailwind utility classes inside a custom CSS rule, e.g. .btn { @apply px-4 py-2 rounded bg-blue-500; }. It extracts repeated utility combinations into a reusable component class within a CSS file.

How do you conditionally combine classes in a React component (relevant to Tailwind/Bootstrap)?

Use template literals or a helper like clsx/classnames: className={clsx('btn', isActive && 'btn-active')}. This toggles utility or component classes based on state/props without manual string concatenation errors.

What are the key selling points of Tailwind's JIT (Just-In-Time) engine?

On-demand generation of only used classes (small builds), support for arbitrary values like w-[137px], faster build times, and enabling all variants (hover, focus, responsive) without pre-generating huge stylesheets.

Summarize when to choose CSS Modules + SASS versus Tailwind versus CSS-in-JS.

CSS Modules + SASS: scoped styles with familiar CSS/preprocessor power and no runtime. Tailwind: rapid, consistent UI via utilities with tiny static output. CSS-in-JS (Styled-Components/Emotion): dynamic, prop-driven, colocated component styling with theming, at some runtime cost.

What role did JSS play historically in the React styling landscape, and why did MUI move away from it?

JSS was an early, plugin-based CSS-in-JS solution and the styling engine of Material-UI v4 (makeStyles/withStyles). MUI v5 migrated to Emotion for better performance, a simpler API (styled/sx), and improved developer experience, so JSS usage has since declined.