This question has two halves: organizing CSS at scale (methodologies) and making it responsive (media queries).

Part 1 — CSS methodologies

Plain CSS doesn't scale: global scope, the cascade, and specificity lead to "specificity wars," !important spam, and fear of deleting anything. Methodologies are conventions that fix this.

BEM (Block, Element, Modifier) — the most common:

.card { }                  /* Block — standalone component */
.card__title { }           /* Element — a part of the block */
.card__title--large { }    /* Modifier — a variant */
.card--featured { }        /* Modifier on the block */

Why it works: selectors stay flat (single class, low specificity), names are self-documenting, components are isolated — .card__title can't accidentally style something else.

Other methodologies:

• OOCSS — separate structure from skin; reuse via composition.
• SMACSS — categorize rules (base, layout, module, state, theme).
• ITCSS — layer the codebase by specificity, generic → explicit.

Modern alternatives that solve the scoping problem differently: CSS Modules (locally-scoped class names), CSS-in-JS (styled-components, Emotion), and utility-first (Tailwind). They make a methodology less necessary by killing global scope.

Part 2 — Responsive media queries

/* Mobile-first: base styles are the small-screen styles */
.container { padding: 1rem; }

/* Layer on enhancements at larger breakpoints with min-width */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .container { grid-template-columns: repeat(3, 1fr); }
}

Mobile-first (min-width) is preferred: the base case is the simplest, and you progressively enhance. It also means old/small devices get the lightest styles.

Beyond media queries — modern responsive CSS often needs fewer of them:

• Fluid units: %, rem, vw, and especially clamp(min, preferred, max) for fluid type/spacing.
• Intrinsic layout: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) adapts with no media queries.
• Container queries (@container) — respond to the parent's size, not the viewport — the right tool for truly reusable components.
• prefers-color-scheme, prefers-reduced-motion — responding to user preferences, not just size.

Senior framing

The senior answer connects the two: methodologies and responsive design both serve maintainability and scalability. The modern nuance — that scoping solutions (CSS Modules, Tailwind) reduce the need for strict BEM, and that container queries + clamp + intrinsic grids reduce the need for breakpoint soup — shows you're current, not stuck in 2016.