Component Design

What Is BEM Methodology and Why Use It in CSS?

BEM (Block, Element, Modifier) is a CSS naming convention that structures class names as block__element--modifier to make every class flat, self-documenting, a…

What Is Prop Drilling and How Do You Avoid It?

Prop drilling is passing a piece of data through several intermediate components via props purely so a deeply nested child can read it, even though those inter…

What Are CSS Container Queries and How Do They Differ from Media Queries?

Container queries let an element style itself based on the size of its nearest containing ancestor rather than the size of the entire viewport, using `containe…

What Are Higher-Order Components (HOCs) in React?

A higher-order component is a function that takes a component as an argument and returns a new component with added behavior or props, letting you reuse cross-…

What Is the Render Props Pattern in React?

The render props pattern is a technique where a component accepts a function as a prop — often literally named `render`, or passed as `children` — and calls th…

What Is the Compound Components Pattern in React?

Compound components is a pattern where several components work together to form one cohesive UI unit — like `<Select>`, `<Select.Option>` — sharing implicit st…

What Is the Atomic CSS Approach?

Atomic CSS is a styling methodology where each class maps to exactly one CSS declaration — like `.mt-4 { margin-top: 1rem; }` — so UI is composed by combining…

What Is Utility-First CSS and How Does It Differ From Semantic CSS?

Utility-first CSS is a workflow where a framework like Tailwind provides a large, pre-defined library of small utility classes (spacing, color, layout, typogra…

What Are CSS Modules and How Do They Solve Global Scope Problems?

CSS Modules are CSS files processed by a build tool so that every class name is automatically scoped to the specific component that imports it, generating uniq…

What Are the Tradeoffs of Using Styled-Components (CSS-in-JS)?

Styled-components lets you write actual CSS inside JavaScript using tagged template literals attached to a component, giving automatic scoping, dynamic styling…