Use BEM naming convention

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;
 }

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);

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="avatars__item">
-        <div class="container__avatar">
+        <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;
 

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%;
 

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;

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;
 }
 `}

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%;
 

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;
 }

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">
+    <div class="navigation__circle">
-        <!-- The inner -->
-        <div class="inner">
         <!-- 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

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">
+<button class="button">
-    <div class="container__line container__line--first"></div>
+    <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;

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;
 }

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">
+<ul class="dots">
-    <li class="item" />
+    <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;

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;

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;
 }
 `}

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;

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%;
 }
 `}

client/patterns/initial-avatar/Details.tsx

@@ -26,15 +26,15 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div class="container">
+<div class="avatar">
-    <div class="container__letters">
+    <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;

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;

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="menu__item">
-        <div class="with-image">
         <!-- Image -->
         ...
+
         <!-- Label -->
         ...
-        </div>
 
         <!-- 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 {
+.menu__divider {
-    align-items: center;
-    display: flex;
-}
-
-.divider {
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     height: 1px;
 }

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;

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;
 }
 `}

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;
 }

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;
 }

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;
 }

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;
 

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;
 }
 `}

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,

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;
 }

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;
 }
 `}

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">
+    <div class="stepper__content">
-        <input type="text" class="input" />
+        <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 {
+.stepper__content {
-    flex: 1
+    flex: 1;
 }
 
-.input {
+.stepper__input {
     /* Take full size of its container */
     height: 100%;
     width: 100%;

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;
 }
 `}

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%;

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;
 

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);
 }

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;

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
 }
 `}

client/patterns/wizard/Details.tsx

@@ -25,18 +25,18 @@ const Details: React.FC<{}> = () => {
 html={`
 <div class="wizard">
     <!-- Step -->
-    <div class="step">
+    <div class="wizard__step">
-        <div class="step__dot">
+        <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,
+.wizard__step:first-child .wizard__connector,
-.step:last-child .step__connector {
+.wizard__step:last-child .wizard__connector {
     background-color: transparent;
 }
 
-.step__number {
+.wizard__number {
     /* Center the content */
     align-items: center;
     display: flex;