CSS CSS Quality & Compliance 2 — Questions and Answers
Question 1: Which tool is most commonly used to lint and enforce code quality rules in CSS?
- Stylelint (Correct answer)
- ESLint
- Prettier
- Babel
Correct answer: Stylelint
Stylelint is the standard linter built specifically to catch errors and enforce conventions in CSS.
Question 2: What does the WCAG minimum contrast ratio of 4.5:1 apply to?
- Normal-size text against its background (Correct answer)
- Decorative borders
- Box shadows
- Hover transitions
Correct answer: Normal-size text against its background
WCAG AA requires a 4.5:1 contrast ratio for normal text to ensure readability.
Question 3: Which practice improves CSS maintainability across a large codebase?
- Using a consistent naming convention like BEM (Correct answer)
- Maximizing use of !important
- Inlining all styles
- Avoiding any comments
Correct answer: Using a consistent naming convention like BEM
A convention like BEM makes class names predictable and reduces conflicts in large projects.
Question 4: Why is overusing the !important declaration considered poor quality?
- It breaks the natural cascade and is hard to override (Correct answer)
- It speeds up rendering too much
- It disables media queries
- It removes specificity entirely
Correct answer: It breaks the natural cascade and is hard to override
!important overrides the cascade, making styles fragile and difficult to maintain.
Question 5: Which CSS feature helps reduce repetition and improve consistency of values?
- Custom properties (CSS variables) (Correct answer)
- Vendor prefixes
- The !important flag
- ID selectors
Correct answer: Custom properties (CSS variables)
Custom properties let you define a value once and reuse it, ensuring consistency.
Question 6: What is a key accessibility concern when removing the default focus outline?
- Keyboard users lose a visible indicator of focus (Correct answer)
- Pages load slower
- Colors invert automatically
- Animations stop working
Correct answer: Keyboard users lose a visible indicator of focus
Removing focus outlines without a replacement leaves keyboard users unable to see where they are.
Question 7: Which of these is a sign of low-quality, hard-to-maintain CSS?
- Deeply nested, overly specific selectors (Correct answer)
- Reusable utility classes
- Documented variables
- Consistent indentation
Correct answer: Deeply nested, overly specific selectors
Highly specific nested selectors are brittle and difficult to override or reuse.
CSS CSS Quality & Compliance 2
Which tool is most commonly used to lint and enforce code quality rules in CSS?