Combining classes

Applying multiple classes to a single element is one of the most powerful patterns in CSS. It lets you build styles from composable pieces rather than writing a separate, monolithic class for every variation you need.

The multi-class pattern

The standard approach is to separate your styles into roles:

• Base class — shared structural styles (dimensions, display, font basics)
• Modifier class — a variation of the base (size, color, state)
• Utility class — a single-purpose helper (margin, alignment, visibility)

A button element might carry three classes at once:

<a class="button button--large button--primary">Get started</a>

• .button defines padding, border-radius, font weight, and cursor
• .button--large increases font size and padding
• .button--primary sets the background color and text color

This pattern (named BEM — Block, Element, Modifier) keeps each class focused and easy to understand in isolation.

How Site Designer shows applied classes

When multiple classes are applied to an element, the Design pane’s Element tab lists all of them in order. Each class is color-coded by type: blue for your own classes, gray for framework classes.

Click any class in the list to make it the active selector. The Style pane then shows — and lets you edit — only the properties belonging to that specific class. This prevents accidental edits to the wrong rule.

Order matters for same-specificity conflicts

When two classes set the same property to different values and both have equal specificity (one class each), the one that appears later in the stylesheet wins. Site Designer applies classes in the order they are listed in your project’s CSS.

In practice this means: if .button--primary and .button--secondary both set background-color, and an element carries both, whichever class is defined later in the stylesheet wins. Avoid putting contradictory classes on the same element — use a single modifier class that clearly expresses the intended variation.

Classes vs. inline styles

Inline styles (set via the element’s style attribute) override all class-based styles regardless of specificity. Site Designer generally avoids writing inline styles, but if you see a property that refuses to change no matter what class you edit, check whether an inline style is in place.

The rule is simple: always use classes for styling, never inline styles. Inline styles are hard to find, impossible to reuse, and create specificity problems that are painful to debug.

The selector field with multiple classes

When an element has several classes applied, Site Designer’s selector field shows the computed selector — all active classes combined. For example, an element with .card and .card--featured shows .card.card--featured in the selector field. This is the actual CSS selector that would target this specific combination, which is useful for understanding exactly what rule is being written.

Framework classes and your own classes together

You can freely combine framework classes (gray) with your own classes (blue). A common pattern:

• .grid-x (Foundation grid) + .project-grid (your custom gap and alignment)
• .btn (Bootstrap base) + .btn-cta (your brand color override)

Because your custom CSS loads after the framework stylesheet, your classes win any tie. This lets you extend and customize framework components without modifying the framework itself.