File structure

The way that your project is structured is largely down to preference, and requirements of the project. However, C3 does make some suggestions. Each Component should have a corresponding CSS file of the same name. For example, if you have a main-menu component, you will have a file named main-menu.css, or an equivalent, such as main-menu.scss. This file will contain a code block for the main-menu component, as well as a code block for each Child of that component.

.main-menu {
  /* styles */

  @media (min-width: 600px) {
    /* contextual styles */
  }
}

.main-menu_item {
  /* styles */
}

.main-menu_link {
  /* styles */

  &[aria-current="page"] {
    /* contextual styles */
  }
}

To the extent that it is possible and practical, all styles that effect main-menu (and its children) should be within this file.

You will probably want to have a few global styles, to perform some reset or base level styling. Such applying a font-family, for example. If these styles need to be overridden for a component, they are done so in the style sheet for that component. The exception to this rule is in circumstances where an element cannot have a class applied to it, such as a p generated from Markdown. In this case a context is added to the global element code block.

p {
  /* global paragraph styles */

  @nest .my-component & {
    /* styles for paragraphs in this component */
  }
}

This ensures that when looking at an element in HTML, you know, thanks to the class name or lack of, exactly where to look for the corresponding styles.

To make the component files easy to locate, they should be contained within a components directory. This might be a folder that contains all files related to a component (including Javascript files, for example), or a folder within a dedicated CSS directory.