SSPS - Single Standard for Project Structure

SSPS - Single Standard for Project Structure

164

2 min.

Definitions

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

Structure and Semantics

The use of lowercase letters and hyphens is mandatory for all project folders and files; this ensures consistency and guarantees the absence of issues, as well as prevents conflicts across different operating systems and version control systems (Git), where case sensitivity may vary, causing errors.

Using kebab-case eliminates chaos like getPrice.ts, Price.tsx, and Name.test.ts in the same directory; complex names like CuteIDKOKReader are transformed into the readable cute-id-kok-reader.ts and protects against Case Sensitive FS bugs.

Why not snake_case? It requires excessive use of the Shift key, is hard to read on the web (for example, if a file is displayed as a link with underlining, the _ blends into the line), and Google officially does not recommend using underscores.

The only acceptable exception is system files in the repository root, such as README or CONTRIBUTING, since their uppercase naming is dictated by generally accepted documentation standards.

The file name should not duplicate information already provided by the folder structure.

Context is determined by location; that is, if a file is located in features/auth, naming it auth-login-form.tsx is redundant the correct name is login-form.tsx.

Moving from names like HeaderUserMenuAvatar to a structure like widgets/header/ui/user-menu/avatar will keep filenames short and precise.

The project is organized in layers with clear areas of responsibility according to FSD.

Global groups (entities, features, widgets) are always named in the plural, specific modules (slices) within them in the singular, and internal segments (ui, model, api) remain standard.

This creates a predictable architecture; a task involving the shopping cart will always lead to features/add-to-cart, where the interface and logic are clearly separated.

Using a consistent naming convention (kebab-case) makes projects uniform, which helps you navigate and solve problems more quickly.

Similar categories:

Similar articles

  • Anatomy of a React component

    My vision for how every React component should look

    99

    8 min.

  • SSF-U - Single Standard for Fullscreen

    The SSF-U standard defines requirements for the semantics, accessibility, and logic of fullscreen

    33

    2 min.

  • SSA - Single Standard for Accordion

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

    47

    2 min.

  • Bad Practices for Websites

    An Analysis of Critical Web Design Mistakes. Why Sliders, Autoplay, and Slow-Loading Pages Reduce Conversion Rates and Rankings on Google and Yandex

    44

    2 min.

  • SSP - Single Standard for Pagination

    The SSP standard defines requirements for the semantics, accessibility, and logic of pagination

    54

    1 min.

  • SSG - Single Standard for Git

    The SSG standard defines requirements for the semantics, accessibility, and logic of Git

    47

    3 min.

  • All articles

Contact me