From 73b361647237c708e788f2343c4dcb3afc73e7f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=B7=E3=83=8E?=
 <s.shin1106@gmail.com>
Date: Mon, 10 Dec 2018 17:55:41 +0900
Subject: [PATCH] (breaking changes)Add prefix to class name (#82)

* feat: add prefix

BREAKING CHANGE: add nes- to class prefix

* feat: fix storybook
---
 docs/balloons.stories.js        |   2 +-
 docs/buttons.stories.js         |   2 +-
 docs/containers.stories.js      |   2 +-
 docs/icons.stories.js           |  36 ++---
 docs/inputs.stories.js          |   8 +-
 docs/table.stories.js           |   2 +-
 docs/textarea.stories.js        |   2 +-
 index.html                      | 232 ++++++++++++++++----------------
 scss/elements/balloons.scss     |   2 +-
 scss/elements/buttons.scss      |   2 +-
 scss/elements/checkboxes.scss   |   2 +-
 scss/elements/containers.scss   |   2 +-
 scss/elements/radios.scss       |   2 +-
 scss/elements/tables.scss       |   2 +-
 scss/form/inputs.scss           |  14 +-
 scss/icons/icons.scss           |  10 +-
 scss/pixel-arts/ash.scss        |   2 +-
 scss/pixel-arts/bcrikko.scss    |   2 +-
 scss/pixel-arts/bulbasaur.scss  |   2 +-
 scss/pixel-arts/charmander.scss |   2 +-
 scss/pixel-arts/mario.scss      |   2 +-
 scss/pixel-arts/octocat.scss    |   2 +-
 scss/pixel-arts/phone.scss      |   2 +-
 scss/pixel-arts/pokeball.scss   |   2 +-
 scss/pixel-arts/smartphone.scss |   2 +-
 scss/pixel-arts/squirtle.scss   |   2 +-
 style.css                       |  28 ++--
 27 files changed, 185 insertions(+), 185 deletions(-)

diff --git a/docs/balloons.stories.js b/docs/balloons.stories.js
index ceed78f..4d42cfa 100644
--- a/docs/balloons.stories.js
+++ b/docs/balloons.stories.js
@@ -12,5 +12,5 @@ stories.add('balloon', () => {
     'from-left': 'from-left',
     'from-right': 'from-right',
   }, '');
-  return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
+  return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
 });
diff --git a/docs/buttons.stories.js b/docs/buttons.stories.js
index 447e224..5d8e859 100644
--- a/docs/buttons.stories.js
+++ b/docs/buttons.stories.js
@@ -15,5 +15,5 @@ stories.add('button', () => {
     'is-error': 'is-error',
     'is-disabled': 'is-disabled',
   }, '');
-  return `<button type="button" class="btn ${extraClass}">Normal</button>`;
+  return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
 });
diff --git a/docs/containers.stories.js b/docs/containers.stories.js
index 9e347e4..0e8c252 100644
--- a/docs/containers.stories.js
+++ b/docs/containers.stories.js
@@ -17,7 +17,7 @@ stories.add('container', () => {
   }, '');
   const selectedClasses = [withTitle, isDark, isRounded, alignment];
 
-  return `<div class="container ${selectedClasses.join(' ')}">
+  return `<div class="nes-container ${selectedClasses.join(' ')}">
       <p class="title">Container</p>
       <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
   </div>`;
diff --git a/docs/icons.stories.js b/docs/icons.stories.js
index 21ad8fc..1838ef3 100644
--- a/docs/icons.stories.js
+++ b/docs/icons.stories.js
@@ -8,28 +8,28 @@ stories.addDecorator(withKnobs);
 
 stories.add('icon', () => {
   const selectedClass = select('class', {
-    'icon twitter': 'icon twitter',
-    'icon facebook': 'icon facebook',
-    'icon github': 'icon github',
-    'icon google': 'icon google',
-    'icon youtube': 'icon youtube',
-    'icon whatsapp': 'icon whatsapp',
-    'icon close': 'icon close',
-    pokeball: 'pokeball',
-    bulbasaur: 'bulbasaur',
-    charmander: 'charmander',
-    squirtle: 'squirtle',
-    smartphone: 'smartphone',
-    phone: 'phone',
-    'octocat animate': 'octocat animate',
-    ash: 'ash',
-    'icon trophy': 'icon trophy',
-    mario: 'mario',
+    'nes-icon twitter': 'nes-icon twitter',
+    'nes-icon facebook': 'nes-icon facebook',
+    'nes-icon github': 'nes-icon github',
+    'nes-icon google': 'nes-icon google',
+    'nes-icon youtube': 'nes-icon youtube',
+    'nes-icon whatsapp': 'nes-icon whatsapp',
+    'nes-icon close': 'nes-icon close',
+    'nes-pokeball': 'nes-pokeball',
+    'nes-bulbasaur': 'nes-bulbasaur',
+    'nes-charmander': 'nes-charmander',
+    'nes-squirtle': 'nes-squirtle',
+    'nes-smartphone': 'nes-smartphone',
+    'nes-phone': 'nes-phone',
+    'nes-octocat animate': 'nes-octocat animate',
+    'nes-ash': 'nes-ash',
+    'nes-icon trophy': 'nes-icon trophy',
+    'nes-mario': 'nes-mario',
     'nes-logo': 'nes-logo',
     'nes-jp-logo': 'nes-jp-logo',
     'snes-logo': 'snes-logo',
     'snes-jp-logo': 'snes-jp-logo',
-  }, 'icon twitter');
+  }, 'nes-icon twitter');
   const selectedSize = radios('size', {
     default: '',
     'is-small': 'is-small',
diff --git a/docs/inputs.stories.js b/docs/inputs.stories.js
index 6fa8016..80f24f2 100644
--- a/docs/inputs.stories.js
+++ b/docs/inputs.stories.js
@@ -8,15 +8,15 @@ stories.addDecorator(withKnobs);
 
 stories.add('input.radio', () => `
       <label>
-        <input type="radio" class="radio" name="answer" checked />
+        <input type="radio" class="nes-radio" name="answer" checked />
         <span>Yes</span>
       </label> <label>
-        <input type="radio" class="radio" name="answer" />
+        <input type="radio" class="nes-radio" name="answer" />
         <span>No</span>
       </label>`)
   .add('input.checkbox', () => `
       <label>
-        <input type="checkbox" class="checkbox" checked />
+        <input type="checkbox" class="nes-checkbox" checked />
         <span>Enable</span>
       </label>`)
   .add('input', () => {
@@ -27,5 +27,5 @@ stories.add('input.radio', () => `
       'is-error': 'is-error',
     }, '');
 
-    return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
+    return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
   });
diff --git a/docs/table.stories.js b/docs/table.stories.js
index 5be3cec..f138432 100644
--- a/docs/table.stories.js
+++ b/docs/table.stories.js
@@ -13,7 +13,7 @@ stories.add('table', () => {
 
   const selectedClasses = [isBordered, isCentered, isDark];
 
-  return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
+  return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
             <th>Table.is-dark</th>
diff --git a/docs/textarea.stories.js b/docs/textarea.stories.js
index 30fe60d..7d12b4a 100644
--- a/docs/textarea.stories.js
+++ b/docs/textarea.stories.js
@@ -14,5 +14,5 @@ stories.add('textarea', () => {
     'is-error': 'is-error',
   }, '');
 
-  return `<textarea id="textarea_field" class="textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
+  return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
 });
diff --git a/index.html b/index.html
index ed45663..deaf295 100644
--- a/index.html
+++ b/index.html
@@ -36,110 +36,110 @@
     </header>
 
     <a class="github-link" href="https://github.com/BcRikko/NES.css" target="_blank">
-      <p class="balloon from-right">Fork me<br />on GitHub</p>
-      <i class="octocat"></i>
+      <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
+      <i class="nes-octocat"></i>
     </a>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Buttons</h2>
       <div>
-        <button type="button" class="btn">Normal</button>
-        <button type="button" class="btn is-primary">Primary</button>
-        <button type="button" class="btn is-success">Success</button>
-        <button type="button" class="btn is-warning">Warning</button>
-        <button type="button" class="btn is-error">Error</button>
-        <button type="button" class="btn is-disabled">Disabled</button>
+        <button type="button" class="nes-btn">Normal</button>
+        <button type="button" class="nes-btn is-primary">Primary</button>
+        <button type="button" class="nes-btn is-success">Success</button>
+        <button type="button" class="nes-btn is-warning">Warning</button>
+        <button type="button" class="nes-btn is-error">Error</button>
+        <button type="button" class="nes-btn is-disabled">Disabled</button>
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Containers</h2>
       <div class="containers">
-        <div class="container with-title is-center">
+        <div class="nes-container with-title is-center">
           <p class="title">Container.is-center</p>
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
-        <div class="container is-dark with-title">
+        <div class="nes-container is-dark with-title">
           <p class="title">Container.is-dark</p>
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
-        <div class="container is-rounded">
+        <div class="nes-container is-rounded">
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
-        <div class="container is-rounded is-dark">
+        <div class="nes-container is-rounded is-dark">
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Radios</h2>
       <div>
         <label>
-          <input type="radio" class="radio" name="answer" checked />
+          <input type="radio" class="nes-radio" name="answer" checked />
           <span>Yes</span>
         </label>
         <label>
-          <input type="radio" class="radio" name="answer" />
+          <input type="radio" class="nes-radio" name="answer" />
           <span>No</span>
         </label>
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Checkboxes</h2>
       <label>
-        <input type="checkbox" class="checkbox" checked />
+        <input type="checkbox" class="nes-checkbox" checked />
         <span>Enable</span>
       </label>
     </section>
 
-    <section class="form container with-title">
+    <section class="form nes-container with-title">
       <h2 class="title">Form</h2>
-      <div class="field">
+      <div class="nes-field">
         <label for="name_field">Your name</label>
-        <input type="text" id="name_field" class="input">
+        <input type="text" id="name_field" class="nes-input">
       </div>
-      <div class="field is-inline">
+      <div class="nes-field is-inline">
         <label for="inline_field">.input.is-success</label>
-        <input type="text" id="inline_field" class="input is-success" placeholder="NES.css">
+        <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
       </div>
-      <div class="field is-inline">
+      <div class="nes-field is-inline">
         <label for="warning_field">.input.is-warning</label>
-        <input type="text" id="warning_field" class="input is-warning" placeholder="8bit.css">
+        <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
       </div>
-      <div class="field is-inline">
+      <div class="nes-field is-inline">
         <label for="error_field">.input.is-error</label>
-        <input type="text" id="error_field" class="input is-error" placeholder="awesome.css">
+        <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
       </div>
       <div class="field">
         <label for="textarea_field">Textarea</label>
-        <textarea id="textarea_field" class="textarea"></textarea>
+        <textarea id="textarea_field" class="nes-textarea"></textarea>
       </div>
     </section>
 
-    <section class="balloon container with-title">
+    <section class="balloon nes-container with-title">
       <h2 class="title">Balloons</h2>
       <div class="messages">
         <div class="message -left">
-          <i class="bcrikko"></i>
-          <div class="balloon from-left">
+          <i class="nes-bcrikko"></i>
+          <div class="nes-balloon from-left">
             <p>Hello NES.css</p>
           </div>
         </div>
         <div class="message -right">
-          <div class="balloon from-right">
+          <div class="nes-balloon from-right">
             <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
           </div>
-          <i class="bcrikko"></i>
+          <i class="nes-bcrikko"></i>
         </div>
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Table</h2>
       <div class="tables">
-        <table class="table is-bordered is-centered">
+        <table class="nes-table is-bordered is-centered">
           <thead>
             <tr>
               <th>Table.is-bordered</th>
@@ -157,7 +157,7 @@
             </tr>
           </tbody>
         </table>
-        <table class="table is-bordered is-dark">
+        <table class="nes-table is-bordered is-dark">
           <thead>
             <tr>
               <th>Table.is-dark</th>
@@ -178,7 +178,7 @@
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Progress</h2>
       <progress class="nes-progress" value="90" max="100"></progress>
       <progress class="nes-progress is-primary" value="80" max="100"></progress>
@@ -188,116 +188,116 @@
       <progress class="nes-progress is-pattern" value="50" max="100"></progress>
     </section>
 
-    <section class="container with-title">
+    <section class="nes-container with-title">
       <h2 class="title">Icons</h2>
-      <section class="container with-title">
+      <section class="nes-container with-title">
         <h3 class="title">Reaction</h3>
         <div>
-          <i class="icon heart is-small"></i>
-          <i class="icon heart"></i>
-          <i class="icon heart is-medium"></i>
-          <i class="icon heart is-large"></i>
-          <i class="icon heart is-empty"></i>
+          <i class="nes-icon heart is-small"></i>
+          <i class="nes-icon heart"></i>
+          <i class="nes-icon heart is-medium"></i>
+          <i class="nes-icon heart is-large"></i>
+          <i class="nes-icon heart is-empty"></i>
 
-          <i class="icon star is-small"></i>
-          <i class="icon star"></i>
-          <i class="icon star is-medium"></i>
-          <i class="icon star is-large"></i>
+          <i class="nes-icon star is-small"></i>
+          <i class="nes-icon star"></i>
+          <i class="nes-icon star is-medium"></i>
+          <i class="nes-icon star is-large"></i>
 
-          <i class="icon star is-half"></i>
-          <i class="icon star is-half is-medium"></i>
-          <i class="icon star is-half is-large"></i>
+          <i class="nes-icon star is-half"></i>
+          <i class="nes-icon star is-half is-medium"></i>
+          <i class="nes-icon star is-half is-large"></i>
 
-          <i class="icon star is-transparent"></i>
-          <i class="icon star is-transparent is-medium"></i>
-          <i class="icon star is-transparent is-large"></i>
+          <i class="nes-icon star is-transparent"></i>
+          <i class="nes-icon star is-transparent is-medium"></i>
+          <i class="nes-icon star is-transparent is-large"></i>
 
-          <i class="icon star is-empty"></i>
+          <i class="nes-icon star is-empty"></i>
 
-          <i class="icon like is-small"></i>
-          <i class="icon like"></i>
-          <i class="icon like is-medium"></i>
-          <i class="icon like is-large"></i>
-          <i class="icon like is-empty"></i>
+          <i class="nes-icon like is-small"></i>
+          <i class="nes-icon like"></i>
+          <i class="nes-icon like is-medium"></i>
+          <i class="nes-icon like is-large"></i>
+          <i class="nes-icon like is-empty"></i>
         </div>
       </section>
-      <section class="container with-title">
+      <section class="nes-container with-title">
         <h3 class="title">SNS</h3>
         <div>
-            <i class="icon twitter is-small"></i>
-          <i class="icon twitter"></i>
-          <i class="icon twitter is-medium"></i>
-          <i class="icon twitter is-large"></i>
+          <i class="nes-icon twitter is-small"></i>
+          <i class="nes-icon twitter"></i>
+          <i class="nes-icon twitter is-medium"></i>
+          <i class="nes-icon twitter is-large"></i>
 
-          <i class="icon facebook is-small"></i>
-          <i class="icon facebook"></i>
-          <i class="icon facebook is-medium"></i>
-          <i class="icon facebook is-large"></i>
+          <i class="nes-icon facebook is-small"></i>
+          <i class="nes-icon facebook"></i>
+          <i class="nes-icon facebook is-medium"></i>
+          <i class="nes-icon facebook is-large"></i>
 
-          <i class="icon github is-small"></i>
-          <i class="icon github"></i>
-          <i class="icon github is-medium"></i>
-          <i class="icon github is-large"></i>
+          <i class="nes-icon github is-small"></i>
+          <i class="nes-icon github"></i>
+          <i class="nes-icon github is-medium"></i>
+          <i class="nes-icon github is-large"></i>
 
-          <i class="icon youtube is-small"></i>
-          <i class="icon youtube"></i>
-          <i class="icon youtube is-medium"></i>
-          <i class="icon youtube is-large"></i>
+          <i class="nes-icon youtube is-small"></i>
+          <i class="nes-icon youtube"></i>
+          <i class="nes-icon youtube is-medium"></i>
+          <i class="nes-icon youtube is-large"></i>
 
-          <i class="icon google is-small"></i>
-          <i class="icon google"></i>
-          <i class="icon google is-medium"></i>
-          <i class="icon google is-large"></i>
+          <i class="nes-icon google is-small"></i>
+          <i class="nes-icon google"></i>
+          <i class="nes-icon google is-medium"></i>
+          <i class="nes-icon google is-large"></i>
 
-          <i class="icon medium is-small"></i>
-          <i class="icon medium"></i>
-          <i class="icon medium is-medium"></i>
-          <i class="icon medium is-large"></i>
+          <i class="nes-icon medium is-small"></i>
+          <i class="nes-icon medium"></i>
+          <i class="nes-icon medium is-medium"></i>
+          <i class="nes-icon medium is-large"></i>
 
-          <i class="icon twitch is-small"></i>
-          <i class="icon twitch"></i>
-          <i class="icon twitch is-medium"></i>
-          <i class="icon twitch is-large"></i>
+          <i class="nes-icon twitch is-small"></i>
+          <i class="nes-icon twitch"></i>
+          <i class="nes-icon twitch is-medium"></i>
+          <i class="nes-icon twitch is-large"></i>
 
-          <i class="icon reddit"></i>
-          <i class="icon reddit is-medium"></i>
-          <i class="icon reddit is-large"></i>
+          <i class="nes-icon reddit"></i>
+          <i class="nes-icon reddit is-medium"></i>
+          <i class="nes-icon reddit is-large"></i>
 
-          <i class="icon whatsapp"></i>
-          <i class="icon whatsapp is-medium"></i>
-          <i class="icon whatsapp is-large"></i>
+          <i class="nes-icon whatsapp"></i>
+          <i class="nes-icon whatsapp is-medium"></i>
+          <i class="nes-icon whatsapp is-large"></i>
         </div>
       </section>
 
-      <section class="container with-title">
+      <section class="nes-container with-title">
         <h3 class="title">Others</h3>
         <div>
-            <i class="icon close is-small"></i>
-          <i class="icon close"></i>
-          <i class="icon close is-medium"></i>
-          <i class="icon close is-large"></i>
+            <i class="nes-icon close is-small"></i>
+          <i class="nes-icon close"></i>
+          <i class="nes-icon close is-medium"></i>
+          <i class="nes-icon close is-large"></i>
 
-          <i class="octocat animate"></i>
+          <i class="nes-octocat animate"></i>
 
-          <i class="icon trophy is-small"></i>
-          <i class="icon trophy"></i>
-          <i class="icon trophy is-medium"></i>
-          <i class="icon trophy is-large"></i>
+          <i class="nes-icon trophy is-small"></i>
+          <i class="nes-icon trophy"></i>
+          <i class="nes-icon trophy is-medium"></i>
+          <i class="nes-icon trophy is-large"></i>
 
-          <i class="mario"></i>
-          <i class="ash"></i>
-          <i class="pokeball"></i>
+          <i class="nes-mario"></i>
+          <i class="nes-ash"></i>
+          <i class="nes-pokeball"></i>
 
-          <i class="bulbasaur"></i>
-          <i class="charmander"></i>
-          <i class="squirtle"></i>
+          <i class="nes-bulbasaur"></i>
+          <i class="nes-charmander"></i>
+          <i class="nes-squirtle"></i>
 
-          <i class="smartphone"></i>
-          <i class="phone"></i>
+          <i class="nes-smartphone"></i>
+          <i class="nes-phone"></i>
         </div>
       </section>
 
-      <section class="container with-title">
+      <section class="nes-container with-title">
         <h3 class="title">Controllers</h3>
         <div>
           <i class="nes-logo"></i>
@@ -319,7 +319,7 @@
   </body>
   <script>
     var link = document.querySelector("a.github-link");
-    var octocat = document.querySelector("a.github-link > i.octocat");
+    var octocat = document.querySelector("a.github-link > i.nes-octocat");
     link.addEventListener("mouseover", function() {
       octocat.classList.add("animate");
     });
diff --git a/scss/elements/balloons.scss b/scss/elements/balloons.scss
index 313a96f..b2e8039 100644
--- a/scss/elements/balloons.scss
+++ b/scss/elements/balloons.scss
@@ -1,4 +1,4 @@
-.balloon {
+.nes-balloon {
   position: relative;
   display: inline-block;
   padding: 1rem 1.5rem;
diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
index c916f8a..28a2fca 100644
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@@ -74,7 +74,7 @@
 }
 
 // Default style
-.btn {
+.nes-btn {
   $border-size: 4px;
 
   position: relative;
diff --git a/scss/elements/checkboxes.scss b/scss/elements/checkboxes.scss
index e5cfe21..9445db5 100644
--- a/scss/elements/checkboxes.scss
+++ b/scss/elements/checkboxes.scss
@@ -1,4 +1,4 @@
-.checkbox {
+.nes-checkbox {
   // prettier-ignore
   $checkbox: (
     (1,1,1,1,1,1,1,1,0,0),
diff --git a/scss/elements/containers.scss b/scss/elements/containers.scss
index 0b0e70b..16ed24c 100644
--- a/scss/elements/containers.scss
+++ b/scss/elements/containers.scss
@@ -1,4 +1,4 @@
-.container {
+.nes-container {
   position: relative;
   padding: 1.5rem 2rem;
 
diff --git a/scss/elements/radios.scss b/scss/elements/radios.scss
index e8c8b46..285e3cd 100644
--- a/scss/elements/radios.scss
+++ b/scss/elements/radios.scss
@@ -1,4 +1,4 @@
-.radio {
+.nes-radio {
   // prettier-ignore
   $radio: (
     (1,1,0,0,0,0),
diff --git a/scss/elements/tables.scss b/scss/elements/tables.scss
index 4a72638..fd35802 100644
--- a/scss/elements/tables.scss
+++ b/scss/elements/tables.scss
@@ -1,4 +1,4 @@
-.table {
+.nes-table {
   table-layout: fixed;
   background-color: $background-color;
   @mixin thsAndTdsBoxShadow($color) {
diff --git a/scss/form/inputs.scss b/scss/form/inputs.scss
index a658d91..bb73434 100644
--- a/scss/form/inputs.scss
+++ b/scss/form/inputs.scss
@@ -1,5 +1,5 @@
-.input,
-.textarea {
+.nes-input,
+.nes-textarea {
   @mixin border-style($border, $outline) {
     outline-color: $outline;
     // prettier-ignore
@@ -28,12 +28,12 @@
   }
 }
 
-.field {
+.nes-field {
   > label {
     display: block;
   }
-  .input,
-  .textarea {
+  .nes-input,
+  .nes-textarea {
     display: block;
   }
 
@@ -49,8 +49,8 @@
       text-align: right;
     }
 
-    .input,
-    .textarea {
+    .nes-input,
+    .nes-textarea {
       flex-basis: 0;
       flex-grow: 5;
     }
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index 3fa7957..43971b9 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -18,7 +18,7 @@
 @import "close.scss";
 @import "trophy.scss";
 
-.icon {
+.nes-icon {
   position: relative;
   display: inline-block;
 
@@ -85,14 +85,14 @@
       @include pixelize($icon-github, $icon-github-colors, $px);
     }
 
-    &.close::before {
-      @include pixelize($icon-close, $icon-close-colors, $px);
-    }
-
     &.youtube::before {
       @include pixelize($icon-youtube, $icon-youtube-colors, $px);
     }
 
+    &.close::before {
+      @include pixelize($icon-close, $icon-close-colors, $px);
+    }
+
     &.google::before {
       @include pixelize($icon-google, $icon-google-colors, $px);
     }
diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
index 9d974c9..1d94866 100644
--- a/scss/pixel-arts/ash.scss
+++ b/scss/pixel-arts/ash.scss
@@ -1,4 +1,4 @@
-.ash {
+.nes-ash {
   $px: 6px;
   // prettier-ignore
   $ash-colors: (#f8f8ff, #ff614e, #007f7f,
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index ddca53c..348bf24 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -1,4 +1,4 @@
-.bcrikko {
+.nes-bcrikko {
   $px: 4px;
   $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
 
diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss
index 225a14f..cee3965 100644
--- a/scss/pixel-arts/bulbasaur.scss
+++ b/scss/pixel-arts/bulbasaur.scss
@@ -1,4 +1,4 @@
-.bulbasaur {
+.nes-bulbasaur {
   $px: 6px;
   // prettier-ignore
   $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss
index 6876300..44232d5 100644
--- a/scss/pixel-arts/charmander.scss
+++ b/scss/pixel-arts/charmander.scss
@@ -1,4 +1,4 @@
-.charmander {
+.nes-charmander {
   $px: 6px;
   // prettier-ignore
   $charmander-colors: (#000202, #f77702, #eb2010,
diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss
index 19a9178..2810c26 100644
--- a/scss/pixel-arts/mario.scss
+++ b/scss/pixel-arts/mario.scss
@@ -1,4 +1,4 @@
-.mario {
+.nes-mario {
   $px: 6px;
   // prettier-ignore
   $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
diff --git a/scss/pixel-arts/octocat.scss b/scss/pixel-arts/octocat.scss
index 5b2012b..6bd903b 100644
--- a/scss/pixel-arts/octocat.scss
+++ b/scss/pixel-arts/octocat.scss
@@ -1,4 +1,4 @@
-.octocat {
+.nes-octocat {
   $px: 6px;
   $octocat-colors: (#333, #ffdec4, #cb7066);
   // prettier-ignore
diff --git a/scss/pixel-arts/phone.scss b/scss/pixel-arts/phone.scss
index 398c13b..151d784 100644
--- a/scss/pixel-arts/phone.scss
+++ b/scss/pixel-arts/phone.scss
@@ -1,4 +1,4 @@
-.phone {
+.nes-phone {
   $px: 6px;
   $phone-colors: (#596985, #3c4665, #000);
   // prettier-ignore
diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss
index 8fbf228..fb9f9b9 100644
--- a/scss/pixel-arts/pokeball.scss
+++ b/scss/pixel-arts/pokeball.scss
@@ -1,4 +1,4 @@
-.pokeball {
+.nes-pokeball {
   $px: 6px;
   $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1);
   // prettier-ignore
diff --git a/scss/pixel-arts/smartphone.scss b/scss/pixel-arts/smartphone.scss
index 2bdec75..ba01cf4 100644
--- a/scss/pixel-arts/smartphone.scss
+++ b/scss/pixel-arts/smartphone.scss
@@ -1,4 +1,4 @@
-.smartphone {
+.nes-smartphone {
   $px: 6px;
   $smartphone-colors: (#fff, #060606);
   // prettier-ignore
diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss
index 2158a6b..76e8612 100644
--- a/scss/pixel-arts/squirtle.scss
+++ b/scss/pixel-arts/squirtle.scss
@@ -1,4 +1,4 @@
-.squirtle {
+.nes-squirtle {
   $px: 6px;
   // prettier-ignore
   $squirtle-colors: (#000, #9cf, #cb6633,
diff --git a/style.css b/style.css
index d437528..6a8278c 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@ body {
   margin: 2rem;
 }
 
-.container:not(:last-child) {
+.nes-container:not(:last-child) {
   margin-bottom: 1rem;
 }
 
@@ -11,7 +11,7 @@ i.brand {
   margin-right: 1rem;
 }
 
-div.containers > .container {
+div.containers > .nes-container {
   display: inline-block;
   max-width: 400px;
 }
@@ -21,45 +21,45 @@ div.tables {
   flex-wrap: wrap;
 }
 
-div.tables > .table {
+div.tables > .nes-table {
   min-width: 350px;
   max-width: calc(50% - 2rem);
 }
-div.tables > .table:first-child {
+div.tables > .nes-table:first-child {
   margin-right: 2rem;
   margin-bottom: 2rem;
 }
 
 @media screen and (max-width: 768px) {
-  div.tables > .table {
+  div.tables > .nes-table {
     max-width: 100%;
     margin-right: 0;
   }
 }
 
-.balloon.container .balloon {
+.balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;
 }
 
-.balloon.container .messages {
+.balloon.nes-container .messages {
   display: flex;
   flex-direction: column;
 }
-.balloon.container .message {
+.balloon.nes-container .message {
   display: flex;
 }
-.balloon.container .message i {
+.balloon.nes-container .message i {
   align-self: flex-end;
 }
-.balloon.container .message.-left {
+.balloon.nes-container .message.-left {
   align-self: flex-start;
 }
-.balloon.container .message.-right {
+.balloon.nes-container .message.-right {
   align-self: flex-end;
 }
 
-.form.container > .field:not(:last-child) {
+.form.nes-container > .nes-field:not(:last-child) {
   margin-bottom: 1rem;
 }
 
@@ -84,12 +84,12 @@ div.tables > .table:first-child {
 .github-link:hover {
   text-decoration: none;
 }
-.github-link > p.balloon {
+.github-link > p.nes-balloon {
   align-self: flex-start;
   padding: 0.2rem 0.5rem;
   font-size: 0.8rem;
   color: #333;
 }
-.github-link > i.octocat {
+.github-link > i.nes-octocat {
   align-self: flex-end;
 }