Separando css en archivos y otra cosa que no recuerdo

src/components/CoverArt.jsx

@@ -1,6 +1,7 @@
 import React, {Fragment, useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 import {getDiscCoverArt, getReleaseCoverArt} from "../services/entity_service";
+import './CoverArt.scss';
 
 export const CoverArt = (props) => {
   const disc = props.disc
@@ -37,13 +38,3 @@ export const CoverArt = (props) => {
     return <DiscSVG className='coverart'/>
   }
 }
-
-
-export const CoverWithCaption = (props) => {
-  return(
-    <figure className='cover-caption'>
-      <CoverArt disc={props.disc} alt={props.alt}/>
-      <figcaption>{props.caption}</figcaption>
-    </figure>
-  );
-}

src/components/CoverArt.scss

@@ -0,0 +1,10 @@
+.coverart {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  outline: 1px var(--gray-2) solid;
+
+  &.loading {
+    display: none;
+  }
+}

src/components/EntityList.scss

@@ -1,7 +1,6 @@
 // Base
 ul.entity-list {
   margin-top: 1em;
-  margin-bottom: 2em;
 
   .entity-header{
     font-size: 1.2em;
@@ -76,6 +75,7 @@ ul.entity-list {
 
   .entity-item {
     margin-bottom: 2em;
+
     a {
       .cover {
         width: 250px;

src/components/Nav.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {Link} from "react-router-dom";
+import './Nav.scss';
 
 export const Nav = () => (
     <nav className='nav'>

src/components/Nav.scss

@@ -0,0 +1,20 @@
+.nav {
+  display: flex;
+  min-height: 3.25em;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+
+  .branding {
+    margin: 0;
+    font-size: 1.777em;
+  }
+
+  .nav-links {
+    display: flex;
+
+    .link {
+      margin-left: 1em;
+    }
+  }
+}

src/components/Paginate.jsx

@@ -1,4 +1,5 @@
 import React, {Fragment, useState} from 'react';
+import './Paginate.scss';
 
 const SPACE_A = 'SPACE_A';
 const SPACE_B = 'SPACE_B';
@@ -154,4 +155,3 @@ export const Paginate = (props) => {
     );
 
 }
-

src/components/Paginate.scss

@@ -0,0 +1,51 @@
+/* Pagination */
+ul.pagination {
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  font-weight: 500;
+
+  .page-center {
+    display: flex;
+  }
+
+  .page-item {
+    height: 2.5em;
+    text-align: center;
+
+    &.left, &.right {
+      width: 7em;
+    }
+
+    .page-link {
+      display: inline-block;
+      height: 100%;
+
+      margin-right: .4em;
+      padding: .75rem 1em;
+
+      color: var(--black);
+      text-decoration: none;
+      line-height: 1;
+
+
+      &.active {
+        color: var(--accent);
+        border-bottom: var(--line-width) solid var(--accent);
+      }
+
+      &:hover:not(.active) {
+        border-bottom: var(--line-width) solid var(--accent);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .spacing {
+    margin: auto 1em;
+    font-weight: normal;
+  }
+}

src/components/SearchBar.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from "react";
 import {FaSearch} from 'react-icons/fa';
+import './SearchBar.scss';
 
 export const SearchBar = (props) => {
     const [query, setQuery] = useState(props.query ? props.query : '')

src/components/SearchBar.scss

@@ -0,0 +1,13 @@
+.searchbar {
+  margin-bottom: 2em;
+  margin-top: 1em;
+
+  button{
+    width: 4em;
+    text-align: center;
+    svg {
+      height: 50%;
+      width: auto;
+    }
+  }
+}

src/index.jsx

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import './styles/reset.css';
 import './styles/main.scss';
 import './styles/grid.scss';
+import './styles/tabs.scss';
 
 import {Nav} from "./components/Nav";
 import {SearchBar} from "./components/SearchBar";

src/styles/main.scss

@@ -1,7 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-/* Variables */
 :root {
   --white: hsl(20, 20%, 98%);
   --gray-1: hsl(20, 20%, 95%);
@@ -24,7 +23,6 @@
   --line-width: 2px;
 }
 
-/* Modificación básica de elementos*/
 body {
   max-width: 75em;
   margin: 0 auto;
@@ -132,104 +130,11 @@ svg.icon {
   vertical-align: text-bottom;
 }
 
-.container {
-  margin-bottom: 1em;
-}
-
-/* Navbar */
-.nav {
-  display: flex;
-  min-height: 3.25em;
-  position: relative;
-  justify-content: space-between;
-  align-items: center;
-
-  .branding {
-    margin: 0;
-    font-size: 1.777em;
-  }
-
-  .nav-links {
-    display: flex;
-
-    .link {
-      margin-left: 1em;
-    }
-  }
-}
-
-/* Pagination */
-ul.pagination {
-  display: flex;
-  margin: 1rem auto;
-  justify-content: space-between;
-  font-weight: 500;
-
-  .page-center {
-    display: flex;
-  }
-
-  .page-item {
-    height: 2.5em;
-    text-align: center;
-
-    &.left, &.right {
-      width: 7em;
-    }
-
-    .page-link {
-      display: inline-block;
-      height: 100%;
-
-      margin-right: .4em;
-      padding: .75rem 1em;
-
-      color: var(--black);
-      text-decoration: none;
-      line-height: 1;
-
-
-      &.active {
-        color: var(--accent);
-        border-bottom: var(--line-width) solid var(--accent);
-      }
-
-      &:hover:not(.active) {
-        border-bottom: var(--line-width) solid var(--accent);
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  .spacing {
-    margin: auto 1em;
-    font-weight: normal;
-  }
-}
-
-.searchbar {
-  margin-bottom: 2em;
-  margin-top: 1em;
-
-  button{
-    width: 4em;
-    text-align: center;
-    svg {
-      height: 50%;
-      width: auto;
-    }
-  }
-}
-
 input.big {
   font-size: var(--font-4);
   font-weight: 500;
 }
 
-/* Input with icon */
 .input-with-icon {
   display: flex;
 
@@ -243,61 +148,6 @@ input.big {
   }
 }
 
-.cover-caption {
-  figcaption {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-top: .5em;
-    line-height: 1;
-    font-weight: 500;
-    max-width: 250px;
-
-    &:after {
-      display: block;
-      content: '';
-      border-bottom: solid var(--line-width) var(--accent);
-      transition: width 250ms ease-in-out;
-      width: 0;
-    }
-  }
-}
-
-.coverart {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  outline: 1px var(--gray-2) solid;
-
-  &.loading {
-    display: none;
-  }
-}
-
-/* Tabs */
-ul.tabs {
-  display: flex;
-  align-items: stretch;
-  border-bottom: var(--line-width) var(--gray-1) solid;
-  margin: 1rem 0;
-
-  li.tab {
-    padding: .5rem 1em;
-    margin-bottom: -2px;
-    cursor: pointer;
-
-    &:hover {
-      border-bottom: var(--line-width) var(--gray-2) solid;
-    }
-
-    &.selected {
-      border-bottom: var(--line-width) var(--accent) solid;
-    }
-  }
-}
-
-/* Utils */
 .full-width {
   width: 100%;
 }
@@ -319,14 +169,3 @@ ul.tabs {
 *[hidden] {
   visibility: hidden;
 }
-
-.space-between {
-  display: flex;
-  justify-content: space-between;
-
-  @media (max-width: 767px) {
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}

src/styles/tabs.scss

@@ -0,0 +1,20 @@
+ul.tabs {
+  display: flex;
+  align-items: stretch;
+  border-bottom: var(--line-width) var(--gray-1) solid;
+  margin: 1rem 0;
+
+  li.tab {
+    padding: .5rem 1em;
+    margin-bottom: -2px;
+    cursor: pointer;
+
+    &:hover {
+      border-bottom: var(--line-width) var(--gray-2) solid;
+    }
+
+    &.selected {
+      border-bottom: var(--line-width) var(--accent) solid;
+    }
+  }
+}