SSPS - Single Standard for Project Structure

SSPS - Single Standard for Project Structure

95

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 ensures consistency and prevents issues. This approach prevents conflicts across different operating systems and version control systems (Git), where case sensitivity may vary, potentially causing errors.

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.

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

Context through nesting

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 help keep filenames short and precise.

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.

The article will be supplemented

Similar categories:

Similar articles

  • SSA - Single Standard for Accordion

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

    200

    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

    45

    2 min.

  • SSP - Single standard for pagination

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

    146

    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

    140

    4 min.

  • How to use Vite with VPN enabled, quick solution

    Troubleshooting Vite issues when using a VPN, configuring the connection to prevent local traffic from being redirected through the VPN tunnel

    185

    2 min.

Contact me

Project type*