Semantic tags like <header>, <nav>, <article>, and <footer> provide meaning to the content, making it easier for search engines and screen readers to understand the structure. They improve accessibility and SEO. Div elements are generic containers with no semantic meaning. Using semantic tags is a best practice in modern web development.
CSS specificity determines which style rule applies when multiple rules target the same element. It's calculated as: inline styles (1000) > ID selectors (100) > class/pseudo-class selectors (10) > element selectors (1). When specificity is equal, the last rule wins. Understanding specificity helps prevent style conflicts and makes CSS more maintainable.
Flexbox is ideal for 1-dimensional layouts (rows OR columns), like navigation bars or centering content. CSS Grid is better for 2-dimensional layouts (rows AND columns), like page layouts. Flexbox is simpler for alignment and distribution, while Grid provides more control over complex layouts. You can use both together in modern responsive designs.
Use minification, avoid redundant selectors, remove unused CSS with tools like PurgeCSS, minimize specificity wars, use CSS variables for maintainability, prefer CSS over JavaScript for animations, lazy-load stylesheets when possible, and use critical CSS inlining for above-the-fold content. Modern bundlers and frameworks automate many of these optimizations.
The Box Model consists of: content (actual content), padding (inside space), border (boundary), and margin (outside space). By default, width/height only apply to content. Using box-sizing: border-box makes them apply to the entire box including padding and border, which is usually preferred for easier calculations and layouts.
Use media queries to apply different styles at different viewport sizes. Use relative units like percentages, em, or rem instead of fixed pixels. Use viewport units (vw, vh) for responsive spacing. Modern CSS features like clamp() help scale sizes fluidly. Mobile-first approach (designing for mobile first) is recommended, then progressively enhance for larger screens.
Pseudo-classes (like :hover, :active, :focus) target elements based on their state or position. Pseudo-elements (like ::before, ::after, ::first-letter) create virtual elements that can be styled. Key difference: pseudo-classes use single colon (:), pseudo-elements use double colon (::). Both are powerful for reducing DOM elements and adding dynamic styling.
CSS variables are defined with -- prefix (--color-primary: blue;) and accessed with var(). They can be scoped to selectors and cascade down. They're dynamic and can be changed with JavaScript, unlike SCSS variables. CSS variables are powerful for theming, dynamic styling, and reducing duplication.