Imports

GravDept uses CSS processors. This enables importing, which harms performance when relying on @import from the CSS spec.

Folder structure

► css
    ► build
        app.css
    ► src
        ► component
        ► core
            ► animation
            ► function
            ► mixin
            ► var
        ► layout
        ► module
        ► override
        ► page
        ► vendor
        _partials.scss
        app.scss

Source files

/component Styles for reusable components.
Most of your CSS should be in components. A large project could have hundreds, but many are just 50–100 lines.
/core Framework tools (animations, functions, mixins, variables).
Defining tools early makes a maintaining a large project much easier.
/layout Styles for global layout (header, body, footer).
/module Styles for a specific module (not shared).
/override Styles Edge cases and shame for old browsers.
/page Styles for one-off content or pages. Rarely needed (almost everything should be a component).
/vendor Styles from 3rd-parties (extensions, GitHub, etc).
_partials.scss List of every partial to include in proper source order.
app.scss Compile to css/build/app.css.

More from the “Code” stack