Consider a Svelte component that uses CSS variables for colors. What is the main benefit of this approach?
<style>
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
color: white;
padding: 1rem;
}
</style>
<button class="button">Click me</button>Think about how changing a single variable affects multiple places.
CSS variables let you define a value once and reuse it. Changing the variable updates all uses, keeping the UI consistent.
Which option correctly applies scoped styles to a Svelte component so styles don't leak outside?
<script> let active = true; </script> <div class:active={active}>Hello</div> <style> /* Styles here */ </style>
Remember how Svelte automatically scopes styles by default.
Svelte scopes styles automatically without extra keywords. Using <style> applies styles only inside the component.
Given the code below, why does the hover color not change?
<style>
button:hover {
background-color: green;
}
</style>
<button>Hover me</button>Check if the CSS selector matches the element and if anything blocks hover.
The selector button:hover is valid and will apply the green background on hover unless overridden or blocked.
Consider this Svelte component that toggles a class on click. What is the background color after two clicks?
<script> let active = false; function toggle() { active = !active; } </script> <button class:active={active} on:click={toggle}>Toggle</button> <style> button { background-color: gray; } .active { background-color: blue; } </style>
Think about how the active state changes on each click.
Click 1: active becomes true, background is blue.
Click 2: active becomes false, background returns to gray.
In advanced UI design, why is combining Flexbox and Grid beneficial for responsiveness?
Think about layout directions and how each tool works best.
Flexbox is great for arranging items in a row or column (one dimension). Grid can arrange items in rows and columns simultaneously (two dimensions). Combining them lets you build complex, flexible, and responsive layouts.