Accessibility

Q91 — How does CSS impact SEO?

CSS doesn’t directly affect SEO, but poor usage can indirectly harm it:

• Hidden text using display:none or visibility:hidden may be penalized.
• Heavy CSS slows page load time, lowering rankings.
• Responsive design improves mobile SEO performance.

✅ Best Practice: Keep CSS clean, minified, and responsive.

Q92 — How do you ensure your CSS is accessible for users with disabilities?

• Use high-contrast colors for readability.
• Don’t rely only on color to convey meaning.
• Use relative units (em, rem) for scalability.
• Ensure visible focus states.
• Keep semantic HTML intact for screen readers.

button:focus {
  outline: 3px solid #000;
}

Q93 — What are the best practices for responsive typography?

• Use relative units (em, rem, %, vw).
• Apply fluid typography:

html {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

• Maintain line-height 1.4–1.6.
• Use media queries for fine-tuning.

Q94 — How do you optimize CSS performance in large projects?

• Minify and compress CSS files.
• Remove unused styles (e.g., PurgeCSS).
• Use shorthand properties.
• Load CSS asynchronously (<link rel="preload">).
• Use CSS variables to reduce repetition.

✅ Example:

/* Instead of */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

/* Use */
margin: 10px;

Q95 — Difference between em, rem, %, and vh/vw?

• em → relative to parent’s font size.
• rem → relative to root element (html).
• % → relative to parent’s property.
• vh/vw → relative to viewport height/width.

p { font-size: 1.2em; }
p { font-size: 1.2rem; }
div { width: 50%; }
div { height: 100vh; }

Q96 — What are critical CSS and why are they important?

Critical CSS = essential styles for above-the-fold content, inlined for faster rendering.

<style>
  body { font-family: Arial; }
  header { background: #000; color: #fff; }
</style>
<link rel="stylesheet" href="style.css">

✅ Faster first paint → better performance and SEO.

Q97 — What accessibility issues can bad CSS cause?

• Removing focus outlines → keyboard users can’t navigate.
• Poor color contrast → low readability.
• Fixed font sizes → break zoom layouts.
• Incorrect display:none → hides content from screen readers.

✅ Always test using tools like Lighthouse or axe.

Q98 — Inline styles vs External CSS vs CSS-in-JS

• Inline styles: Quick but not reusable.
• External CSS: Best for performance and caching.
• CSS-in-JS: Great for component-based apps (React, Vue).

✅ Best Practice: Use external CSS for large apps; CSS-in-JS for React projects.

Q99 — How to make CSS maintainable in large-scale projects?

• Follow naming conventions (BEM, SMACSS).
• Break CSS into reusable modules.
• Use variables for consistency.
• Document code structure.
• Avoid deep selectors.

.card__title { font-size: 1.5rem; }
.card__button--primary { background: blue; }

Q100 — Common CSS pitfalls and how to avoid them?

• Overusing !important → hard to maintain.
• Not testing across browsers.
• Using fixed units (px) → not responsive.
• Leaving large unused CSS files.
• Too many nested selectors.

✅ Solution: Use modern CSS, responsive units, and test regularly.

⬅ Home