Nes.css: CSS file size is too large

[BcRikko]

CSS file size is too large. I want to make A more light.
nes.css contains a lot of things that are not commonly used. (NINTENDO's Characters, large phone icon, game controllers)

（Not to change the subject, but I'm worried about copyright issues of NINTENTO's characters.）

|file|size|
|----|---:|
|nes.css|267,508B|
|nes.css.map|53,334B|
|nes.min.css|249,973B|

I propose to split the file as follows.

• nes.css
  
  
  
  • elements, forms, components, and etc.
  
  
• nes-icons.css
  
  
  
  • Reaction icons
  
  
  • SNS icons
  
  
• nes-pixel-arts.css
  
  
  
  • other icons
  
  

Usage

<!-- General usage -->
<link href="./css/nes.min.css">

<!-- If you need icons -->
<link href="./css/nes.min.css">
<link href="./css/nes-icons.min.css">

<!-- if you need pixel arts -->
<link href="./css/nes.min.css">
<link href="./css/nes-icons.min.css">
<link href="./css/nes-pixel-arts.min.css">

[guastallaigor]

+1 for splitting into multiple files, but I have a question ✋
If someone uses npm install or yarn add, what they will get? Just the nes.min.css or all of it?

[BcRikko]

It looks like this:

// scss
@import "~nes.css/scss/nes.scss";
@import "~nes.css/scss/nes-icons.scss";
@import "~nes.css/scss/nes-pixel-arts.scss";

// js
import "nes.css/css/nes.css";
import "nes.css/css/nes-icons.css";
import "nes.css/css/nes-pixel-arts.css";

// or
import "nes.css/css/nes.min.css";
import "nes.css/css/nes-icons.min.css";
import "nes.css/css/nes-pixel-arts.min.css";

[BcRikko]

umm... I might want all-in-one CSS file. 🤔
It's so difficult....

Thanks to everyone, CSS has been optimize. 👐
So the following might be also good. 👍

• nes-core.css
  
  
  
  • base
  
  
  • vendors
  
  
  • elements
  
  
  • forms
  
  
  • and so on
  
  
• nes.css
  
  
  
  • nes-core.css
  
  
  • icons.css
  
  
• nes-pixel-arts.css

Usage

<!-- If you need only core style. this is minimum configuration -->
<link href="./css/nes-core.css">

<!-- General usage -->
<link href="./css/nes.min.css">

<!-- If you need pixel icons -->
<link href="./css/nes-core.css">
<link href="./css/nes-pixel-arts.css">

<!-- or -->
<link href="./css/nes.css">
<link href="./css/nes-pixel-arts.css">

I don't know the optimal solution. 😱
Trezy said, "You can select and download.".
This issue and discussion will be unnecessary once it is completed.

[co16353sidak]

Splitting is the best way to go, as with this you won't lose functionality as well as you will also gain some speed, because a user can choose which module it wants.

[BcRikko]

It would be nice to have a tool like this. 😆
https://codepen.io/bcrikko/full/OKNjRQ

[merwok]

If someone uses npm install or yarn add, what they will get? Just the nes.min.css or all of it?

I think the npm distribution could contain everything, but then people would be able to choose what they import (core, icons, etc) and the builder (webpack) would only include the needed bits in the final bundle, so you would get both convenience and performance :sparkles: