CSS is, most of the time, repetitive. It's no surprise, though: the very nature of this language consists of an array of properties and values grouped into "classes".

A class is a reusable style pattern.

As you work on more projects, you find yourself creating similar style patterns over and over. For example, you may create a class to:

• reduce the opacity on hover;
• increase the box-shadow on hover;
• have a secondary link style.

Some of these classes target behavior selectors (i.e., hover/focus effects); others don't. The common denominator is they're used across multiple components. Instead of being copied in each component where they're used, they should have their own global file.

💅 A library of shared styles #

Today we introduce the Shared-Styles visual editor.

In CodyFrame, we've always had a "place" for the shared styles (📁 custom-style/_shared-styles.scss). We've used it to store reusable styles like shadow or radius values.

Over the last months, we've observed how CodyFrame's users have been extending the functionality of this "global". It turns out the number of shared styles can increase exponentially as the project grows in complexity.

The Shared Styles editor will help you build this library of styles in the browser and answer the "where have I used this style before?" question. No more digging into other components' CSS to copy that style: create the shared-style in the editor, then come back later to copy the class name.

The SCSS generated by the editor should be pasted into the 📁 custom-style/_shared-styles.scss CodyFrame's file.

Example 1. Create a behavioral shared-style #

Probably the most frequent use for the editor is to collect style behaviors.

For example:

<!-- 👇 option 1) repeat the code for each component -->
<div class="component-1"></div>
<div class="component-2"></div>

<style>
  .component-1 {
    box-shadow: var(--shadow-sm);
    transition: .3s;
  }

  .component-1:hover {
    box-shadow: var(--shadow-md);
  }

  .component-2 {
    box-shadow: var(--shadow-sm);
    transition: .3s;
  }

  .component-2:hover {
    box-shadow: var(--shadow-md);
  }
</style>

<!-- 👇 option 2) abstract the shared-style -->
<div class="component-1 hover:elevate"></div>
<div class="component-2 hover:elevate"></div>

<style>
  .hover\:elevate {
    box-shadow: var(--shadow-sm);
    transition: .3s;
  }

  .hover\:elevate:hover {
    box-shadow: var(--shadow-md);
  }
</style>

In the editor you can create a hover:elevate style:

Example 2. Create a complex shared-style #

You can also use the editor to collect "complex" styles. By complex, we mean styles that contain multiple CSS properties and values.

For example, let's suppose you've created a text style and use it across multiple components.

You can create the style in the editor and copy the class whenever you need it.

Shared-styles vs. utility classes #

Unlike CodyFrame's utility classes, shared-styles can be more complex and target behaviors. Other frameworks have pseudo-class variants, but shared-styles solve a different problem.

Imagine you have different components that share some style:

<!-- 👇 using pseudo-class variants -->
<div class="component-1 shadow-sm has-transition hover:shadow-md"></div>
<div class="component-2 shadow-sm has-transition hover:shadow-md"></div>
<div class="component-3 shadow-sm has-transition hover:shadow-md"></div>

<!-- 👇 using shared-styles -->
<div class="component-1 hover:elevate"></div>
<div class="component-2 hover:elevate"></div>
<div class="component-3 hover:elevate"></div>

With pseudo-class variants, if you want to update the hover effect, you have to track down all the components where it's used and update the utility classes. With shared-styles, you change the hover:elevate class.

Shared-styles vs. components #

Shared-styles are not to be confused with components.

For example, let's suppose you have multiple components with a "close" button (e.g., modal window, drawer, dialog...). For consistency, you're applying the same style to these buttons.

If you're working with a JS framework (Vue/React/...), you should probably create a <CloseBtn> component. If you're not using a templating language, you can take advantage of shared-styles to modify the design of multiple elements at once.

However, keep in mind that shared-styles should not replace components. They're style patterns shared across multiple components.