Use BEM naming convention

2025-08-06 22:26:33 +02:00 · 2021-04-01 16:46:44 +07:00
parent e1b4c6efa2
commit 538e5f750e
37 changed files with 233 additions and 214 deletions
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -66,22 +66,22 @@ const Details: React.FC<{}> = () => {
                <BrowserFrame
 html={`
 <!-- Container -->
-<div class="container">
+<div class="accordion">
    <!-- Each accordion item -->
-    <div class="item">
+    <div class="accordion__item">
        <!-- Heading -->
-        <div class="header">
+        <div class="accordion__header">
            <!-- The toggle icon -->
-            <div class="toggle">...</div>
+            <div class="accordion__toggle">...</div>

            <!-- The title -->
-            <div class="title">
+            <div class="accordion__title">
                ...
            </div>
        </div>

        <!-- The content -->
-        <div class="content">
+        <div class="accordion__content">
            ...
        </div>
    </div>
@@ -91,18 +91,18 @@ html={`
 </div>
 `}
 css={`
-.container {
+.accordion {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom-color: transparent;
    border-radius: 4px;
 }

-.item {
+.accordion__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 }

-.header {
+.accordion__header {
    /* Center the content horizontally */
    align-items: center;
    display: flex;
@@ -110,22 +110,25 @@ css={`
    cursor: pointer;
    padding: 16px;
 }
-.toggle {
+
+.accordion__toggle {
    margin-right: 12px;
 }
-.title {
+
+.accordion__title {
    /* Take remaining width */
    flex: 1;
 }

-.content {
+.accordion__content {
    /* For not selected item */
    display: none;

    border-top: 1px solid rgba(0, 0, 0, 0.3);
    padding: 16px;
 }
-.content.selected {
+
+.accordion__content--selected {
    /* For selected item */
    display: block;
 }
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -22,43 +22,43 @@ const Details: React.FC<{}> = () => {
                <BrowserFrame
 html={`
 <!-- Up arrow button -->
-<button class="container">
+<button class="button">
    <!-- Arrow -->
-    <div class="container__arrow container__arrow--up"></div>
+    <div class="button__arrow button__arrow--up"></div>

    <!-- Content -->
    ...
 </button>

 <!-- Right arrow button -->
-<button class="container">
+<button class="button">
    <!-- Content -->
    ...

    <!-- Arrow -->
-    <div class="container__arrow container__arrow--right"></div>
+    <div class="button__arrow button__arrow--right"></div>
 </button>

 <!-- Down arrow button -->
-<button class="container">
+<button class="button">
    <!-- Arrow -->
-    <div class="container__arrow container__arrow--down"></div>
+    <div class="button__arrow button__arrow--down"></div>

    <!-- Content -->
    ...
 </button>

 <!-- Left arrow button -->
-<button class="container">
+<button class="button">
    <!-- Arrow -->
-    <div class="container__arrow container__arrow--left"></div>
+    <div class="button__arrow button__arrow--left"></div>

    <!-- Content -->
    ...
 </button>
 `}
 css={`
-.container {
+.button {
    /* Center the content */
    align-items: center;
    display: flex;
@@ -68,7 +68,7 @@ css={`
    padding: 8px;
 }

-.container__arrow {
+.button__arrow {
    /* Transparent background */
    background-color: transparent;

@@ -77,28 +77,28 @@ css={`
    width: 12px;
 }

-.container__arrow--up {
+.button__arrow--up {
    /* Edges */
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(25%) rotate(45deg);
 }

-.container__arrow--right {
+.button__arrow--right {
    /* Edges */
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(-25%) rotate(45deg);
 }

-.container__arrow--down {
+.button__arrow--down {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
 }

-.container__arrow--left {
+.button__arrow--left {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -41,10 +41,10 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="avatars">
    <!-- Avatar item -->
-    <div class="container__item">
-        <div class="container__avatar">
+    <div class="avatars__item">
+        <div class="avatars__image">
            <!-- Image -->
            ...
        </div>
@@ -55,16 +55,16 @@ html={`
 </div>
 `}
 css={`
-.container {
+.avatars {
    display: flex;
 }

-.container__item {
+.avatars__item {
    /* Nagative margin make avatar overlap to previous one */
    margin-left: -4px;
 }

-.container__avatar {
+.avatars__image {
    /* Add a white curve between avatars */
    box-shadow: 0 0 0 4px #FFF;

--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -21,20 +21,20 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="avatar">
    <!-- Avatar image -->
-    <img class="container__avatar" src="..." />
+    <img class="avatar__image" src="..." />
 </div>
 `}
 css={`
-.container {
+.avatar {
    /* Rounded border */
    border-radius: 50%;
    height: 64px;
    width: 64px;
 }

-.container__avatar {
+.avatar__image {
    /* Rounded border */
    border-radius: 50%;

--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -21,12 +21,12 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="badge">
    ...
 </div>
 `}
 css={`
-.container {
+.badge {
    /* Center the content */
    align-items: center;
    display: flex;
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -21,24 +21,25 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="breadcrumb">
    <!-- Breadcrumb item -->
    <a>...</a>

    <!-- Separator -->
-    <div class="separator">/</div>
+    <div class="breadcrumb__separator">/</div>

    <!-- Repeated items and separators -->
    ...
 </div>
 `}
 css={`
-.container {
+.breadcrumb {
    /* Content is centered vertically */
    align-items: center;
    display: flex;
 }
-.separator {
+
+.breadcrumb__separator {
    margin: 0 8px;
 }
 `}
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -22,9 +22,9 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="cards">
    <!-- A card with given width -->
-    <div class="card">
+    <div class="cards__item">
        ...
    </div>

@@ -33,7 +33,7 @@ html={`
 </div>
 `}
 css={`
-.container {
+.cards {
    display: flex;

    /* Put a card in the next row when previous cards take all width */
@@ -42,7 +42,8 @@ css={`
    margin-left: -8px;
    margin-right: -8px;
 }
-.card {
+
+.cards__item {
    /* There will be 4 cards per row */
    flex-basis: 25%;

--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -23,31 +23,31 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="card">
    <!-- Cover -->
-    <div class="container__cover">
+    <div class="card__cover">
        ...
    </div>

    <!-- Content -->
-    <div class="container__content">
+    <div class="card__content">
        ...
    </div>
    ...
 </div>
 `}
 css={`
-.container {
+.card {
    display: flex;
    flex-direction: column;
 }

-.container__cover {
+.card__cover {
    height: 150px;
    width: 100%;
 }

-.container__content {
+.card__content {
    /* Take available height */
    flex: 1;
 }
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -57,15 +57,14 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="navigation">
    <!-- The trigger element that will show all circles when user clicks it -->
    ...

    <!-- A circle menu item -->
-    <div class="item">
-        <!-- The inner -->
-        <div class="inner">
-            <!-- The content -->
+    <div class="navigation__circle">
+        <!-- The content -->
+        <div class="navigation__content">            
            ...
        </div>
    </div>
@@ -75,10 +74,11 @@ html={`
 </div>
 `}
 css={`
-.container {
+.navigation {
    position: relative;
 }
-.item {
+
+.navigation__circle {
    /* Position */
    position: absolute;
    top: 0;
@@ -95,7 +95,8 @@ css={`
    height: 32px;
    width: 32px;
 }
-.inner {
+
+.navigation__content {
    /*
    Rotate it to make it displayed vertically
    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -21,14 +21,14 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<button class="container">
-    <div class="container__line container__line--first"></div>
+<button class="button">
+    <div class="button__line button__line--first"></div>

-    <div class="container__line container__line--second"></div>
+    <div class="button__line button__line--second"></div>
 </button>
 `}
 css={`
-.container {
+.button {
    /* Reset */
    background-color: transparent;
    border-color: transparent;
@@ -44,7 +44,7 @@ css={`
    position: relative;
 }

-.container__line {
+.button__line {
    /* Background color */
    background-color: rgba(0, 0, 0, 0.3);

@@ -56,7 +56,7 @@ css={`
    width: 100%;
 }

-.container__line--first {
+.button__line--first {
    /* Position */
    left: 0px;
    top: 50%;
@@ -67,7 +67,7 @@ css={`
    width: 100%;
 }

-.container__line--second {
+.button__line--second {
    /* Position */
    left: 50%;
    top: 0px;
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -23,9 +23,9 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="banner">
    <!-- Tells visitors that the website uses cookie -->
-    <div class="container__content">
+    <div class="banner__content">
        ...
    </div>

@@ -34,7 +34,7 @@ html={`
 </div>
 `}
 css={`
-.container {
+.banner {
    /* Banner is displayed at the bottom */
    bottom: 0;
    left: 0;
@@ -47,7 +47,7 @@ css={`
    justify-content: center;
 }

-.container__content {
+.banner__content {
    /* Take available width */
    flex: 1;
 }
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -45,15 +45,15 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<ul class="container">
-    <li class="item" />
+<ul class="dots">
+    <li class="dots__item"></li>

    <!-- Repeat other dots -->
    ...
 </div>
 `}
 css={`
-.container {
+.dots {
    /* Center the content */
    align-items: center;
    display: flex;
@@ -64,7 +64,8 @@ css={`
    margin: 0;
    padding: 0;
 }
-.item {
+
+.dots__item {
    /* Rounded border */
    border-radius: 9999px;
    height: 12px;
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -26,10 +26,10 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Backdrop -->
-    <div class="overlay"></div>
+    <div class="container__overlay"></div>

    <!-- Sidebar -->
-    <div class="sidebar">
+    <div class="container__sidebar">
        ...
    </div>
 </div>
@@ -45,7 +45,8 @@ css={`

    z-index: 9999;
 }
-.overlay {
+
+.container__overlay {
    /* Take full size */
    height: 100%;
    left: 0;
@@ -58,7 +59,8 @@ css={`

    z-index: -1;
 }
-.sidebar {
+
+.container__sidebar {
    /* Take full height */
    height: 100%;
    left: 0;
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -34,7 +34,7 @@ html={`
    <button>...</button>

    <!-- The content -->
-    <div class="dropdown-content">
+    <div class="dropdown__content">
        ...
    </div>
 </div>
@@ -45,7 +45,7 @@ css={`
 }

 /* Hide the dropdown's content by default -->
-.dropdown-content {
+.dropdown__content {
    display: none;

    /* Position it right below the trigger element */
@@ -64,7 +64,7 @@ css={`
 }

 /* Show the content when hover on the container -->
-.dropdown:hover .dropdown-content {
+.dropdown:hover .dropdown__content {
    display: block;
 }
 `}
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -23,7 +23,7 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- The close button -->
-    <button class="close">
+    <button class="container__close">
        ...
    </button>

@@ -48,7 +48,7 @@ css={`
    justify-content: center;
 }

-.close {
+.container__close {
    /* Shown at top right corner */
    position: absolute;
    right: 16px;
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -26,15 +26,15 @@ html={`
    <header>
        ...
    </header>
-    <main class="main">
+    <main class="container__main">
        <!-- Left sidebar -->
-        <aside class="left">...</aside>
+        <aside class="container__left">...</aside>

        <!-- Main content -->
-        <article class="middle">...</article>
+        <article class="container__middle">...</article>

        <!-- Right sidebar -->
-        <nav class="right">...</nav>
+        <nav class="container__right">...</nav>
    </main>
    <footer>
        ...
@@ -46,7 +46,8 @@ css={`
    display: flex;
    flex-direction: column;
 }
-.main {
+
+.container__main {
    /* Take the remaining height */
    flex-grow: 1;

@@ -54,14 +55,17 @@ css={`
    display: flex;
    flex-direction: row;
 }
-.left {
+
+.container__left {
    width: 25%;
 }
-.middle {
+
+.container__middle {
    /* Take the remaining width */
    flex-grow: 1;
 }
-.right {
+
+.container__right {
    width: 20%;
 }
 `}
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -26,15 +26,15 @@ const Details: React.FC<{}> = () => {
                </div>
                <BrowserFrame
 html={`
-<div class="container">
-    <div class="container__letters">
+<div class="avatar">
+    <div class="avatar__letters">
        <!-- The letters -->
        ...
    </div>
 </div>
 `}
 css={`
-.container {
+.avatar {
    /* Center the content */
    display: inline-block;
    vertical-align: middle;
@@ -52,7 +52,7 @@ css={`
    width: 48px;
 }

-.container__letters {
+.avatar__letters {
    /* Center the content */
    left: 50%;
    position: absolute;
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -34,12 +34,12 @@ html={`
    ...

    <!-- An item that triggers displaying the mega menu -->
-    <div class="trigger">
+    <div class="container__trigger">
        <!-- The trigger item's content -->
        <div>...</div>

        <!-- Mega menu -->
-        <div class="content">
+        <div class="container__content">
            ...
        </div>
    </div>
@@ -51,12 +51,12 @@ css={`
    position: relative;
 }

-.trigger:hover .content {
+.container__trigger:hover .container__content {
    /* Show the mega menu when hovering the trigger item */
    display: block;
 }

-.content {
+.container__content {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin-top: -1px;
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -25,39 +25,42 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="menu">
    <!-- Normal menu item -->
-    <div class="item">
+    <div class="menu__item">
        ...
    </div>

    <!-- With hot key -->
-    <div class="item with-shortcut">
+    <div class="menu__item">
        <!-- Label -->
        ...
        <!-- Hot key -->
-        ...
+        <div class="menu__hotkey">
+            ...
+        </div>
    </div>

    <!-- With image and hot key -->
-    <div class="item with-shortcut">
-        <div class="with-image">
-            <!-- Image -->
-            ...
-            <!-- Label -->
-            ...
-        </div>
+    <div class="menu__item">
+        <!-- Image -->
+        ...
+
+        <!-- Label -->
+        ...

        <!-- Hot key -->
-        ...
+        <div class="menu__hotkey">
+            ...
+        </div>
    </div>

    <!-- Divider -->
-    <div class="divider"></div>
+    <div class="menu__divider"></div>
 </div>
 `}
 css={`
-.container {
+.menu {
    display: flex;
    flex-direction: column;

@@ -66,23 +69,18 @@ css={`
    border-radius: 4px;
 }

-.item {
+.menu__item {
    /* Center the content horizontally */
    align-items: center;
    display: flex;
 }

-.with-shortcut {
+.menu__hotkey {
    /* Push the hot key to the right */
-    justify-content: space-between;
+    margin-left: auto;
 }

-.with-image {
-    align-items: center;
-    display: flex;
-}
-
-.divider {
+.menu__divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    height: 1px;
 }
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -28,9 +28,9 @@ const Details: React.FC<{}> = () => {
                </div>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="modal">
    <!-- Header -->
-    <div class="container__header">
+    <div class="modal__header">
        <!-- Title -->
        ...
        <!-- Close icon sticks to the right -->
@@ -41,26 +41,26 @@ html={`
    ...

    <!-- Footer -->
-    <div class="container__footer">
+    <div class="modal__footer">
        ...
    </div>
 </div>
 `}
 css={`
-.container {
+.modal {
    /* Border */
    border: 1px solid rgba(0, 0, 0.3);
    border-radius: 4px;
 }

-.container__header {
+.modal__header {
    display: flex;
    justify-content: space-between;
    /* Border */
    border-bottom: 1px solid rgba(0, 0, 0.3);
 }

-.container__footer {
+.modal__footer {
    display: flex;
    /* Push the buttons to the right */
    justify-content: flex-end;
--- a/client/patterns/nested-dropdowns/Details.tsx
+++ b/client/patterns/nested-dropdowns/Details.tsx
@@ -26,7 +26,7 @@ const Details: React.FC<{}> = () => {
                </div>
                <BrowserFrame
 html={`
-<ul class="container">
+<ul class="dropdown">
    <li>Home</li>
    <li>
        <div>Patterns</div>
@@ -53,7 +53,7 @@ html={`
 </ul>
 `}
 css={`
-.container {
+.dropdown {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
@@ -64,7 +64,7 @@ css={`
    padding: 0;
 }

-.container li {
+.dropdown li {
    /* Spacing */
    padding: 8px;

@@ -73,7 +73,7 @@ css={`
 }

 /* The sub dropdown */
-.container ul {
+.dropdown ul {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);

@@ -95,19 +95,19 @@ css={`
 }

 /* The second level sub dropdown */
-.container ul ul {
+.dropdown ul ul {
    left: 100%;
    position: absolute;
    top: 0;
 }

 /* Change background color of list item when being hovered */
-.container li:hover {
+.dropdown li:hover {
    background-color: rgba(0, 0, 0, 0.1);
 }

 /* Show the direct sub dropdown when hovering the list item */
-.container li:hover > ul {
+.dropdown li:hover > ul {
    display: block;
 }
 `}
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -27,7 +27,7 @@ const Details: React.FC<{}> = () => {
                </div>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="notification">
    <!-- Content -->
    ...

@@ -36,7 +36,7 @@ html={`
 </div>
 `}
 css={`
-.container {
+.notification {
    display: flex;
    justify-content: space-between;
 }
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -22,11 +22,9 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="pagination">
    <!-- Pagination item -->
-    <div style="
-        
-    ">
+    <div class="pagination__item">
        ...
    </div>

@@ -35,7 +33,7 @@ html={`
 </div>
 `}
 css={`
-.container {
+.pagination {
    display: flex;

    /* Border */
@@ -43,7 +41,7 @@ css={`
    border-radius: 4px;
 }

-.item {
+.pagination__item {
    /* Center the content */
    align-items: center;
    display: flex;
@@ -52,7 +50,7 @@ css={`
    /* Right border */
    border-right: 1px solid rgba(0, 0, 0, 0.3);
 }
-.item + .item {
+.pagination__item + .pagination__item {
    /* No right border */
    border-right: none;
 }
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -24,12 +24,12 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Column -->
-    <div class="column">
+    <div class="container__column">
        <!-- Cover -->
        ...

        <!-- Content -->
-        <div class="content">
+        <div class="container__content">
            ...
        </div>

@@ -45,7 +45,8 @@ css={`
 .container {
    display: flex;
 }
-.column {
+
+.container__column {
    flex: 1;
    /* Space between columns */
    margin: 0 8px;
@@ -54,7 +55,8 @@ css={`
    display: flex;
    flex-direction: column;
 }
-.content {
+
+.container__content {
    /* Take available height */
    flex: 1;
 }
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -24,12 +24,12 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Sidebar -->
-    <aside class="sidebar">
+    <aside class="container__sidebar">
        ...
    </aside>

    <!-- Main -->
-    <main class="main">
+    <main class="container__main">
        ...
    </main>
 </div>
@@ -38,10 +38,12 @@ css={`
 .container {
    display: flex;
 }
-.sidebar {
+
+.container__sidebar {
    width: 30%;
 }
-.main {
+
+.container__main {
    /* Take the remaining width */
    flex: 1;

--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -25,10 +25,10 @@ html={`
 <!-- Row -->
 <div class="row">
    <!--Cell with given width. Replace 25% with whatever you want -->
-    <div class="cell width-1/4">25%</div>
+    <div class="row__cell row__cell--1/4">25%</div>

    <!-- Cell that takes remaining width -->
-    <div class="cell width-fill">
+    <div class="row__cell row__cell--fill">
        ...
    </div>
 </div>
@@ -40,16 +40,18 @@ css={`
    margin-left: -8px;
    margin-right: -8px;
 }
-.cell {
+
+.row__cell {
    padding-left: 8px;
    padding-right: 8px;
 }

 /* Cell with given width. Replace 25% with whatever you want */
-.cell.width-1/4 {
+.row__cell--1/4 {
    flex: 0 0 25%;
 }
-.cell.width-fill {
+
+.row__cell--fill {
    flex: 1;
 }
 `}
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -29,17 +29,17 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Input -->
-    <input type="text" class="input" />
+    <input type="text" class="container__input" />

    <!-- Buttons container -->
-    <div class="buttons">
+    <div class="container__buttons">
        <!-- Up button -->
-        <button class="button">
+        <button class="container__button">
            ...
        </button>

        <!-- Down button -->
-        <button class="button">
+        <button class="container__button">
            ...
        </button>
    </div>
@@ -52,21 +52,21 @@ css={`
    display: flex;
 }

-.input {
+.container__input {
    border-color: transparent;
    margin-right: 4px;
    padding: 4px;
    width: 100px;
 }

-.buttons {
+.container__buttons {
    /* Content is centered vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
 }

-.button {
+.container__button {
    border-color: transparent;
    /* Make buttons have the same height */
    flex: 1,
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -29,7 +29,7 @@ html={`
    </li>

    <!-- Navigation item that sticks to the right -->
-    <li class="item-right">
+    <li class="container__item--right">
        <a href="">...</a>
    </li>
 </ul>
@@ -45,7 +45,7 @@ css={`
    margin: 0;
 }

-.item-right {
+.container__item--right {
    /* Sticks to the right */
    margin-left: auto;
 }
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -25,12 +25,12 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Left content -->
-    <div class="half">
+    <div class="container__half">
        ...
    </div>

    <!-- Right content -->
-    <div class="half">
+    <div class="container__half">
        ...
    </div>
 </div>
@@ -39,7 +39,8 @@ css={`
 .container {
    display: flex;
 }
-.half {
+
+.container__half {
    flex: 1;
 }
 `}
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -30,21 +30,21 @@ const Details: React.FC<{}> = () => {
            <div className='p-8 pb-20'>
                <BrowserFrame
 html={`
-<div class="container">
+<div class="stepper">
    <!-- Minus button -->
-    <button class="button">-</button>
+    <button class="stepper__button">-</button>

    <!-- Input container -->
-    <div class="input-container">
-        <input type="text" class="input" />
+    <div class="stepper__content">
+        <input type="text" class="stepper__input" />
    </div>

    <!-- Plus button -->
-    <button class="button">+</button>
+    <button class="stepper__button">+</button>
 </div>
 `}
 css={`
-.container {
+.stepper {
    display: flex;

    /* Border */
@@ -55,7 +55,7 @@ css={`
    width: 128px;
 }

-.button {
+.stepper__button {
    /* Center the content */
    align-items: center;
    display: flex;
@@ -65,11 +65,11 @@ css={`
    width: 32px;
 }

-.input-container {
-    flex: 1
+.stepper__content {
+    flex: 1;
 }

-.input {
+.stepper__input {
    /* Take full size of its container */
    height: 100%;
    width: 100%;
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -26,13 +26,13 @@ const Details: React.FC<{}> = () => {
                <BrowserFrame
 html={`
 <div class="container">
-    <header class="header">
+    <header class="container__header">
        ...
    </header>
-    <main class="main">
+    <main class="container__main">
        ...
    </main>
-    <footer class="footer">
+    <footer class="container__footer">
        ...
    </footer>
 </div>
@@ -43,11 +43,13 @@ css={`
    flex-direction: column;
    height: 100%;
 }
-.header,
-.footer {
+
+.container__header,
+.container__footer {
    flex-shrink: 0;
 }
-.main {
+
+.container__main {
    flex-grow: 1;
 }
 `}
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
                <BrowserFrame
 html={`
 <div class="container">
-    <section class="section">
+    <section class="container__section">
        ...
    </section>

@@ -38,7 +38,8 @@ css={`
    height: 100%;
    overflow: scroll;
 }
-.section {
+
+.container__section {
    /* Take full size */
    height: 100%;
    width: 100%;
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -29,10 +29,10 @@ const Details: React.FC<{}> = () => {
                <BrowserFrame
 html={`
 <label class="label">
-    <input type="checkbox" class="input" />
+    <input type="checkbox" class="label__input" />

    <!-- Circle -->
-    <div class="circle"></div>
+    <div class="label__circle"></div>
 </label>
 `}
 css={`
@@ -57,12 +57,12 @@ css={`
    justify-content: flex-end;
 }

-.input {
+.label__input {
    /* Hide the input */
    display: none;
 }

-.circle {
+.label__circle {
    /* Rounded border */
    border-radius: 9999px;

--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -49,12 +49,12 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="tabs">
    <!-- Active tab -->
-    <div class="tab--active">
+    <div class="tabs__tab--active">
        ...
    </div>

    <!-- Inactive tab -->
-    <div class="tab--inactive">
+    <div class="tabs__tab--inactive">
        ...
    </div>
 </div>
@@ -67,7 +67,7 @@ css={`
    justify-content: center;
 }

-.tab--active {
+.tabs__tab--active {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    /* Hide the bottom border */
@@ -78,7 +78,7 @@ css={`
    border-top-right-radius: 2px;
 }

-.tab--inactive {
+.tabs__tab--inactive {
    /* Has only the bottom border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 }
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- Text input -->
-    <input type="text" class="input" />
+    <input type="text" class="container__input" />

    <!-- Toggle button sticks to the right -->
    <button>
@@ -41,7 +41,7 @@ css={`
    border: 1px solid rgba(0, 0, 0, 0.3);
 }

-.input {
+.container__input {
    border-color: transparent;
    /* Take available width */
    flex: 1;
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -26,10 +26,10 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="container">
    <!-- The real file input -->
-    <input type="file" class="input" />
+    <input type="file" class="container__input" />

    <!-- The upload icon -->
-    <div class="icon">...</div>
+    <div class="container__icon">...</div>

    <!-- The label -->
    ...
@@ -48,7 +48,7 @@ css={`
    border: 1px solid rgba(0, 0, 0, 0.3);
 }

-.input {
+.container__input {
    /* Take the full size */
    height: 100%;
    left: 0;
@@ -60,7 +60,7 @@ css={`
    opacity: 0;
 }

-.icon {
+.container__icon {
    margin-right: 8px
 }
 `}
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -25,18 +25,18 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="wizard">
    <!-- Step -->
-    <div class="step">
-        <div class="step__dot">
+    <div class="wizard__step">
+        <div class="wizard__dot">
            <!-- The left connector -->
-            <div class="step__connector"></div>
+            <div class="wizard__connector"></div>

            <!-- The step number -->
-            <div class="step__number">
+            <div class="wizard__number">
                ...
            </div>

            <!-- The right connector -->
-            <div class="step__connector"></div>
+            <div class="wizard__connector"></div>
        </div>

        <!-- Title of step -->
@@ -52,30 +52,30 @@ css={`
    display: flex;
 }

-.step {
+.wizard__step {
    /* Make all steps have the same width */
    flex: 1;
 }

-.step__dot {
+.wizard__dot {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
 }

-.step__connector {
+.wizard__connector {
    flex: 1;
    height: 1px;
    background-color: rgba(0, 0, 0, .3);
 }

-.step:first-child .step__connector,
-.step:last-child .step__connector {
+.wizard__step:first-child .wizard__connector,
+.wizard__step:last-child .wizard__connector {
    background-color: transparent;
 }

-.step__number {
+.wizard__number {
    /* Center the content */
    align-items: center;
    display: flex;