What is the difference between Symbol & Class?

Community resources General
1

Hi,

As shown in the image, I have 3 buttons. I can copy-paste 1 button (let’s say the white one) on multiple pages. Changes I make to one white button, will affect all white buttons across multiple pages. The same is the case with symbols.

So what’s the difference between a class and a symbol?

Do I make three symbols here (black button, grey button & white button) ?
Or, do I simply copy-paste them as classes ?

image
image879×129 6.66 KB

image

2

The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class. Read more

CSS Example:

.red-text{
   color: red;
}

Symbols not related to CSS language - is a feature that exists in Webflow (reusable component). For buttons, symbols are not so useful (Because of each time the URL change). But again not a problem to turn button to a symbol (Use the same link in X places).

If you want DRY (Don’t repeat yourself approach for buttons):

  1. Create base styles (Padding/margin and so on) for .button class
  2. Than create combo class .button.red change the background to red. The same idea for outline, gray, small, large.

If you want to change the padding for “all” buttons - do not change .button.red change the Base class (.button) (Like this you keep the DRY approach).

This is the way CSS frameworks work:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

Summary: Classes are way to “Not repeat yourself” every time in “design scope” - symbols do the same work but for component (components like footer or navbar). Inside your components the elements use classes for style/design.

1 Like
3

Thank you very much for explaining, @Siton_Systems. I understand it now. :slight_smile: