SSPS - Single Standard for Project Structure

SSPS - Single Standard for Project Structure

67

2 min.

The SSPS standard defines requirements for the structure and naming of files and folders in a project.

Kebab-case everywhere

The use of lowercase letters and hyphens is mandatory for all project folders and files. This is a conscious choice of case that ensures consistency and guarantees no problems. This approach prevents conflicts across different operating systems and version control systems (Git), where case sensitivity may vary, causing errors when merging branches or building on CI.

Using kebab-case solves the following problems:

  • Eliminates chaos such as getPrice.ts, Price.tsx, and Name.test.ts in the same directory.
  • Complex names like CuteIDKOKReader are converted to the readable cute-id-kok-reader.ts.
  • Protects against Case Sensitive FS bugs.

Why not snake_case:

  • Requires excessive use of the Shift key.
  • Difficult to read on the web (for example, if the file is displayed as a link with underlining, the _ merges with the line).
  • Google does not officially recommend using underscores.

Paths in imports look uniform and are easy to read. The only acceptable exception is system files in the root of the repository, such as README or CONTRIBUTING, since their upper case is dictated by generally accepted documentation standards.

Context through nesting

The file name should not duplicate information already provided by the folder structure. In SSPS, context is determined by location, i.e. if the file is located in features/auth, then naming it auth-login-form.tsx is redundant. The correct name is login-form.tsx.

Moving from names like HeaderUserMenuAvatar to the structure widgets/header/ui/user-menu/avatar allows file names to remain concise and accurate.

FSD architectural principles

The project is built in layers with clear areas of responsibility. Global groups (entities, features, widgets) are always named in the plural. Specific modules (slices) within them are singular. Internal segments (ui, model, api) remain standard.

This creates a predictable architecture; the task of changing the basket will always lead to features/add-to-cart, where the interface and logic are clearly separated. The use of a single register (kebab-case) makes projects uniform, which helps to navigate and solve tasks faster.

Similar categories:

Similar articles

  • SSA - Single Standard for Accordion

    The SSA standard defines requirements for the semantics, accessibility, and logic of accordion operation.

    131

    2 min.

  • Bad Practices for Websites

    Analysis of critical web design mistakes. Why sliders, autoplay audio, and heavy pages reduce conversion rates and rankings on Google and Yandex

    14

    2 min.

  • SSP - Single standard for pagination

    The SSP standard defines requirements for the semantics, accessibility, and logic of page-by-page navigation

    108

    1 min.

  • SSV - Single Standard for Video

    The SSV standard defines requirements for semantics, background and interactive video settings, attributes for Safari, accessibility rules, and video weight

    102

    4 min.

  • How to use Vite with VPN enabled, quick solution

    Solves problems with Vite working when VPN is enabled, connection settings, to avoid redirecting local traffic to the VPN tunnel

    92

    2 min.

Contact me

Project type*