5 exercises — specificity, BEM, CSS custom properties, Grid vs Flexbox, utility classes — concepts that come up in every frontend code review.
0 / 10 completed
1 / 10
"The new button has higher specificity than the global rule, so it overrides it." CSS specificity is:
Specificity is calculated as a score: inline styles (1-0-0-0) > IDs (0-1-0-0) > classes/attributes/pseudo-classes (0-0-1-0) > elements/pseudo-elements (0-0-0-1). When specificity is equal, the rule that appears last in the stylesheet wins (the cascade). !important overrides all, but should be used sparingly.
2 / 10
"We follow BEM naming conventions." BEM stands for:
BEM (Block Element Modifier) is a naming convention: .card (block), .card__title (element), .card--featured (modifier). It avoids specificity wars and makes styles self-documenting. Example: .btn__icon--small. Alternative methodologies: SMACSS, OOCSS, Utility-first (Tailwind).
3 / 10
Complete the sentence: "We define our brand colours once as _____ so that every component inherits them and a theme change updates everything automatically."
CSS custom properties (also called CSS variables) are defined with a double-dash prefix: --color-primary: #2563eb; and consumed with var(--color-primary). Unlike Sass variables, they are live — they respond to media queries, JavaScript changes, and cascade normally. Defined on :root for global scope.
4 / 10
"Use Flexbox for this nav bar, but Grid for the page layout." When is Grid the better choice?
Flexbox is one-dimensional: great for distributing space along a row or column (nav bars, button groups, centering). CSS Grid is two-dimensional: ideal for page-level layouts where both rows and columns matter. Practical rule: Flex for components, Grid for layouts — though they combine well.
5 / 10
"The component broke because we changed a utility class in the global stylesheet." A utility class is:
A utility class (or atomic class) encapsulates a single style rule. Example: .flex { display: flex }, .gap-4 { gap: 1rem }. Frameworks like Tailwind CSS are built entirely on utility classes. They promote composability and reduce specificity issues, but can make HTML verbose. The opposite approach is semantic/component-based CSS (BEM, CSS Modules).
6 / 10
Code Review Comment: 'I'm seeing that you've applied the .rounded-button utility class directly to the main navigation item. While it looks good, this is creating a very specific CSS rule and potentially conflicting with your global stylesheet rules for the nav bar. Consider using a more semantic approach or adjusting your global styles.' What does this comment primarily highlight regarding CSS architecture?
The comment focuses on the issue of CSS specificity. Applying a utility class directly creates an overly specific rule that can easily conflict with more general styles defined elsewhere. The correct answer identifies this core problem – increased specificity is often a sign of architectural issues requiring further investigation and refactoring.
7 / 10
Slack Message: 'Hey team, just noticed that the responsive grid isn't adapting properly on smaller screens. @johndoe, could you check if the column widths are defined using percentages or fixed values?' What does this Slack message suggest about the current approach to designing a responsive layout?
The message highlights that fixed widths (likely pixels) are being used for column definitions in the grid. This is problematic because it prevents the layout from adapting fluidly to different screen sizes. The correct answer correctly identifies this as a key issue with responsive design – reliance on flexible units is crucial.
8 / 10
PR Description: 'This PR introduces a new component for displaying product details. It utilizes CSS Modules to scope the styles locally and avoid naming collisions. The component's CSS is also imported into the main application stylesheet using a dynamic import.' What architectural principle does this PR primarily demonstrate?
The description explicitly mentions CSS Modules, which are designed to encapsulate styles within individual components. This is a core principle of modular architecture – preventing naming conflicts and promoting code reusability. The correct answer correctly identifies this as the key architectural benefit.
9 / 10
Standup Update: 'I've been working on implementing a new layout using CSS Grid. I'm leveraging its ability to create complex two-dimensional layouts without needing floats or absolute positioning.' What is the primary advantage of using CSS Grid in this context?
CSS Grid excels at creating two-dimensional layouts (rows and columns) – a significant improvement over older techniques like floats or absolute positioning. The correct answer accurately reflects this core strength and the benefit of increased efficiency.
10 / 10
Code Review Comment: 'The styling for this form field is using a utility class—input-text—which is great for consistency. However, it's currently defined in the global stylesheet and will likely be overwritten if any other element on the page needs similar input formatting.' What does this comment suggest about the potential issues with using global utility classes?
The comment correctly identifies that defining a utility class in the global stylesheet introduces the risk of it being overwritten by other styles. This can lead to inconsistency and makes maintaining styling more difficult. The correct answer accurately highlights this potential problem.
What does the "CSS & Frontend Architecture Vocabulary" vocabulary exercise cover?
This exercise tests real IT vocabulary related to css & frontend architecture vocabulary through 10 multiple-choice questions, each built from realistic workplace sentences rather than abstract definitions.
Is this vocabulary exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is completely free — no account, sign-up, or payment required.
How many questions does this exercise have?
This exercise has 10 questions. Each one shows a real-world sentence or scenario with multiple-choice options and an explanation once you answer.
What happens after I answer a question?
You'll see immediate feedback showing whether your answer was correct, along with a short explanation of why — then a button to move to the next question, and a full results screen at the end.
Can I retry the exercise if I get questions wrong?
Yes. Once you reach the results screen, click "Try again" to reset your answers and go through the exercise from the start as many times as you like.
Do I need to create an account to take this exercise?
No account is needed. Your answers are scored in your browser during the session — nothing is saved to a server, so you can jump straight in.
Is my progress saved if I leave the page?
No — progress within an exercise resets if you navigate away or reload. Each exercise is short enough to complete in a few minutes in one sitting.
Are these vocabulary exercises connected to other topics?
Yes — this module shares real-world context with 2 other vocabulary modules. See "Related vocabulary" below to keep building a connected skill set.
How is this different from reading a glossary or blog article?
Exercises like this one are active recall drills — you have to choose the correct term or phrasing yourself, which builds retention faster than passively reading a definition.
Where can I find more vocabulary exercises?
Browse the full Vocabulary exercises hub for hundreds of modules covering Agile, DevOps, security, databases, architecture, and more — organised by IT role and skill.