CSS Interview Questions

Topics in Focus

1. Selectors and Specificity
   1. Types of selectors (class, ID, attribute, pseudo-classes, pseudo-elements)
   2. Specificity rules
   3. Inheritance
2. Box Model
   1. Content, padding, border, and margin
   2. Box-sizing property
   3. Understanding different box models (content-box vs border-box)
3. Layout Techniques
   1. Flexbox
   2. Grid
   3. Float and clear
   4. Positioning (static, relative, absolute, fixed, sticky)
   5. CSS Units (px, em, rem, %, vh, vw)
4. Responsive Design
   1. Media queries
   2. Mobile-first vs desktop-first approaches
   3. Viewport meta tag
   4. Responsive units and techniques
5. CSS Animations and Transitions
   1. Keyframes
   2. Transition property
   3. Animation property
6. Preprocessors and Architecture
   1. SASS/SCSS, LESS
   2. BEM (Block Element Modifier)
   3. CSS Modules
   4. CSS-in-JS
7. Performance and Optimization
   1. Critical rendering path
   2. Minification and concatenation
   3. Reducing reflows and repaints
   4. Lazy loading of styles
8. CSS Variables (Custom Properties)
   1. Defining and using CSS variables
   2. Scope and inheritance of variables
9. Accessibility
   1. CSS techniques for accessible design
   2. Focus management
   3. Using ARIA roles and properties
10. Advanced Techniques
    1. CSS Grid advanced properties (grid-template-areas, minmax, auto-fill)
    2. Advanced selectors (nth-child, nth-of-type)
    3. CSS Houdini

Interview Questions

1. Selectors and Specificity
2. What are the different types of CSS selectors and how do they work?
3. Explain the CSS specificity hierarchy. How would you resolve specificity conflicts?
4. How does inheritance work in CSS? Can you provide an example?
5. Box Model
6. Explain the CSS box model and how you can change the box model used by an element.
7. How do padding, margin, and border affect the size of an element?