wip-coding-note.md

Coding notes

[WIP] Component categories

TODO: find better names

The word "component" is so general that we leave it from our categories.

• pages ... Largest components
• organizations ... Small size components
• independents ... Small size components without store
• atoms ... Smallest components
• functional ... Components without UIs

Category	Pages	organizations	independents	Atoms	Functional
Has own CSS class prefix	✓	✓	✓	✓	✓
Set to router	✓
Connect to store	✓	✓
Visible	✓	✓	✓	✓
Contains pages
Contains organizations	✓	✓			✓
Contains independents	✓	✓	✓		✓
Contains atoms	✓	✓	✓		✓
Contains functional	✓	✓	✓		✓

CSS class names

Example

<div class="NiceHeader">
  <img class="NiceHeader-logoImage" />
  <div class="NiceHeader-linkGroup">
    <a class="NiceHeader-linkItem -highlighted">Hi</a>
    <a class="NiceHeader-linkItem">Yo</a>
  </div>
</div>

Component

A component should have own name prefix in UpperCamelCase as well as class names.

// OK
const NiceHeader = () => <div className="NiceHeader"/>;

// NG
const NiceHeader = () => <div className="GoodHeader"/>;
const NiceHeader = () => <div className="niceHeader"/>;
const NiceHeader = () => <div className="nice-header"/>;

Component item

Each item in component should follow the prefix in lowerCamelCase as well as variable names, and connected by a minus symbol -.

<!-- OK -->
<img class="NiceHeader-superGreatLogoImage" />

<!-- NG -->
<img class="NiceHeader--superGreatLogoImage" />
<img class="NiceHeader_superGreatLogoImage" />
<img class="NiceHeader-SuperGreatLogoImage" />
<img class="NiceHeader-super_great_logo_image" />
<img class="NiceHeader-super-great-logo-image" />

It might be better to consider to extract that item to an individual component.

Modifier

If there is a need to change appearance according to state, you can use a modifier, which starts with a minus symbol - followed by lowerCamelCase.

You cannot specify any styles for modifiers without combination with any components or component items.

/* OK */
.NiceHeader-logoImage.-superGreat {}

/* NG */
.-superGreat {}
.NiceHeader-logoImage.superGreat {}
.NiceHeader-logoImage._superGreat {}
.NiceHeader-logoImage-superGreat {}
.NiceHeader-logoImage.-super-great {}
.NiceHeader-logoImage.-super_great {}