Writing reusable CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is reusable CSS?

Reusable CSS means writing styles that can be used on many elements or pages without rewriting the same code. It saves time and keeps code clean.

beginner

Why use CSS classes for reusability instead of IDs?

Classes can be used on multiple elements, making styles reusable. IDs are unique and should be used only once per page.

intermediate

What is a CSS variable and how does it help reuse?

A CSS variable stores a value (like a color) that you can reuse throughout your styles. Changing it once updates all places using it.

intermediate

How does using utility classes improve CSS reusability?

Utility classes are small, single-purpose classes (like .text-center) that you can combine to style elements quickly without repeating code.

advanced

What is the benefit of separating layout and theme styles in reusable CSS?

Separating layout (structure) and theme (colors, fonts) lets you reuse layout styles with different themes easily, making your CSS flexible.

Which CSS selector is best for reusable styles?

A ID selector

B Element selector

C Class selector

D Inline style

Class selectors can be applied to many elements, making styles reusable. IDs are unique and inline styles are not reusable.

What does a CSS variable start with?

A $

B @

C #

D --

CSS variables start with two dashes, like --main-color.

Why avoid repeating the same CSS code in multiple places?

A It makes maintenance harder

B It improves browser speed

C It makes the file smaller

D It is required by CSS rules

Repeating code makes it harder to update styles later because you must change many places.

What is a utility class in CSS?

A A class that applies one small style

B A class that styles the whole page

C A class that is only used once

D A class that uses !important

Utility classes apply a single style, like margin or text alignment, making them easy to reuse.

How can you make colors reusable in CSS?

A Use inline styles

B Use CSS variables

C Use element selectors

D Use !important

CSS variables let you define colors once and reuse them everywhere.

Explain how to write CSS that can be reused on many elements.

Think about how you can write styles once and apply them many times.

Describe the benefits of separating layout and theme styles in reusable CSS.

Consider how changing colors without touching layout helps.