File Organization & Naming

Partial files MUST begin with an underscore and MUST use kebab-case naming. Each BEM block SHOULD have its own file. Imports in app.scss MUST follow the defined order: variables, globals, components, modules, libraries.

Introduction

This standard defines rules for organizing and naming SCSS files to ensure a consistent, predictable project structure where every file has a clear purpose and is easy to locate.

File Naming

Partial files MUST begin with an underscore: _component-name.scss
File names MUST use kebab-case: _main-header.scss, _blog-card.scss
Each BEM block SHOULD have its own file with the same name as the block: block .main-header → _main-header.scss
A single file MUST NOT contain styles for multiple unrelated blocks.

Import Organization in app.scss

Imports MUST be ordered in the following sequence:

Variables and mixins (_variable.scss)
Global styles (reset, font, base)
Components (header, footer, menu, breadcrumb...)
Modules (page sections)
External libraries and overrides

Commented-out Imports

Commented-out imports in app.scss MAY be kept for easier module management. Since SCSS single-line comments (//) are stripped during compilation, they have no impact on the production CSS output.

However, commented-out code inside component files (.scss) SHOULD be removed if it is no longer relevant.