CSS & Frontend

A weight calculated from a selector's components (IDs, classes, elements) that determines which rule wins when selectors conflict.

"The button style wasn't applying because the ID selector in the legacy CSS had higher specificity than our class-based design system."

The algorithm that determines which CSS rule applies to an element when multiple rules target it, using origin, specificity, and order.

"Understanding the cascade is essential — the same property defined in author, user, and browser stylesheets follows a specific resolution order."

Block Element Modifier — a naming convention for CSS classes: .block__element--modifier, providing clarity and low specificity.

"We use BEM: .card__title--highlighted. The double underscores and hyphens make the relationship between components immediately clear."

A single-purpose CSS class that applies one specific style, composable to build UI without writing custom CSS.

"Instead of writing custom CSS, we compose utility classes: .flex .items-center .gap-4 builds the layout declaratively."

Variables in CSS defined with --name: value and referenced with var(--name), enabling dynamic theming.

"--color-primary is defined once on :root — changing it to support dark mode cascades through every component automatically."

A one-dimensional CSS layout model for distributing space and aligning items along a single axis (row or column).

"We use flexbox for the navigation bar — display: flex; justify-content: space-between aligns the logo left and links right."

A two-dimensional CSS layout system for creating row-and-column layouts with precise control over item placement.

"The dashboard uses CSS Grid — grid-template-areas lets us name regions and rearrange the layout in media queries."

An approach where UI layouts adapt to different screen sizes using fluid grids, flexible images, and media queries.

"The responsive design uses a mobile-first approach — we write base styles for small screens and use min-width breakpoints to enhance for larger ones."

A specific viewport width at which a responsive layout changes its behavior using a media query.

"At the 768px breakpoint the sidebar switches from hidden to visible — we defined this in a @media (min-width: 768px) query."

A keyword added to a selector that targets a specific state of an element: :hover, :focus, :nth-child(), :not().

"We use :focus-visible instead of :focus to only show the outline for keyboard users, not mouse clicks."

A keyword that creates a virtual element for styling part of an element's content: ::before, ::after, ::placeholder.

"The card uses a ::before pseudo-element to inject a decorative coloured stripe without extra HTML markup."

The model describing every HTML element as a box with content, padding, border, and margin layers.

"Setting box-sizing: border-box means padding and border are included in the element's width, making layouts much more predictable."