Anatomy of a React component
My vision for how every React component should look
99
8 min.
164
2 min.
The SSPS standard defines the requirements for the structure and naming of files and folders within a project.
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.
My vision for how every React component should look
99
8 min.
The SSF-U standard defines requirements for the semantics, accessibility, and logic of fullscreen
33
2 min.
The SSA standard defines requirements for the semantics, accessibility, and logic of accordion
47
2 min.
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.
The SSP standard defines requirements for the semantics, accessibility, and logic of pagination
54
1 min.
The SSG standard defines requirements for the semantics, accessibility, and logic of Git
47
3 min.