Horizontal slicing style guide

modified.md

Horizontal slicing style guide

File naming

FeatureNameAndFileType.extension

Examples:

DashboardComponent.jsx

UserApiService.js

ProfileImageStyles.css

Folder structure

All files related to a feature should be stored in the same folder. The folder should be named after the feature it represents.

Child components that are only relevant to this feature should be stored in subfolders of the main feature folder.

A _shared file (preceded by an underscore so that it is listed in the top of the structure in sort order) should be used for any files used across multiple features. For instance, shared components, services, utilities, styles, etc.

├── _shared
│   └── components
│       └── UserProfile
│           ├── UserProfileComponent.jsx
│           └── UserProfileStyles.jsx
│       └── UserAvatar
│           ├── UserAvatarComponent.jsx
│           └── UserAvatarStyles.jsx
│       └── UserStatus
│           ├── UserStatusComponent.jsx
│           └── UserStatusStyles.jsx
│   └── services
│       ├── GroupApiService.js
│       └── UserApiService.js
├── Dashboard
│   ├── DashboardComponent.jsx
│   ├── DashboardStyles.js
│   └── tiles
│       └── QuickLinks
│           ├── QuickLinksComponent.jsx
│           └── QuickLinksStyles.js

style.md

Horizontal slicing style guide

File naming

file-name.type.extension

Examples:

dashboard.component.jsx

user-api.service.js

profile-image.styles.css

Folder structure

All files related to a feature should be stored in the same folder. The folder should be named after the feature it represents.

Child components that are only relevant to this feature should be stored in subfolders of the main feature folder.

A _shared file (preceded by an underscore so that it is listed in the top of the structure in sort order) should be used for any files used across multiple features. For instance, shared components, services, utilities, styles, etc.

├── _shared
│   └── components
│       └── user-profile
│           ├── user-profile.component.jsx
│           ├── user-profile.container.jsx
│           └── user-profile.styles.jsx
│       └── user-avatar
│           ├── user-avatar.component.jsx
│           └── user-avatar.styles.jsx
│       └── user-status
│           ├── user-status.component.jsx
│           └── user-status.styles.jsx
│   └── services
│       ├── group-api.service.js
│       └── user-api.service.js
├── dashboard
│   ├── dashboard.component.jsx
│   ├── dashboard.container.js
│   ├── dashboard.stories.jsx
│   ├── dashboard.styles.js
│   ├── dashboard.actions.js
│   ├── dashboard.reducer.js
│   ├── dashboard.state.js
│   └── tiles
│       └── quick-links
│           ├── quick-links.component.jsx
│           ├── quick-links.stories.js
│           └── quick-links.styles.js