Nes.css: Add prefix to class name

[BcRikko]

⚠️Breaking changes⚠️

Since NES.css doesn't provide layout. It maybe conflict when NES.css using the common class name.
Maybe add a prefix like ns- or nes- to solve this.

レイアウト関連のスタイルは提供していないためユーザ任せになる。そのときにNES.cssで汎用的なクラス名を使っているとコンフリクトする可能性がある。

ns-、nes-みたいなprefixをつけてコンフリクトを解消したい 🤔

<!-- ユーザ定義（.container） -->
<section class="container">
    <!-- NES.css (.ns-container.with-title) -->
    <section class="ns-container with-title">
    </section>
</section>

[DanSnow]

Translation:

Title: Add prefix to class name

Body:

Since NES.css doesn't provide layout. It maybe conflict when NES.css using the common class name.
Maybe add a prefix like ns- or nes- to solve this.

[BcRikko]

@DanSnow Thanks for translate 🙇

[IngwiePhoenix]

"ns-" would not be a good choice - it may be confused with "ms" when reading, whilst not paying attention. I suggest either "nes" or "ncss" or "8bit".

[trezy]

.8bit-selector is an invalid selector, since CSS selectors can't start with a digit. .nes-selector would be a good one, though, as it's not used by any other major CSS libraries.

[IngwiePhoenix]

Derp, I forgot that for a moment... Then I am siding with nes-.

[BcRikko]

OK, nes- 👍

For example...

<button class="nes-button is-primary"></button>

<section class="nes-container is-rounded with-title"></section>

<i class="nes-icon heart is-large"></i>

<div class="nes-field">
  <input class="nes-input is-success">
</div>

[IngwiePhoenix]

Yes, I’d agree on that. :)

[BcRikko]

This issue include breaking changes. ⚠️
so I would like to fix after setting CI. -> #13

[BinaryMoon]

I'd suggest everything should have a prefix. is-large, is-primary etc could all be classes used in other libraries.

[BcRikko]

I think that there are few libraries that only use .is-primary or is-xxx. 🤔

For example, in the case of bulma.

.button
   &.is-primary

https://github.com/jgthms/bulma/blob/master/docs/_sass/index.sass#L72-L73

.nes-btn.is-primary(NES.css) and .button.is-primary(Bulma) do not conflict.
so, I think that prefix is not necessary for everything 🙈

[trezy]

Another option we could eventually look into is allowing users to generate their own version of the library. This idea comes from the Brototype library. There's a companion to that library, Bro-tie, that allows the user to do just that.

It's certainly not something we need to bother with while the framework is still in such an early stage, but it would certainly be a fun option to provide. Either way, I agree that we should be fine if we add the prefix to the main classes, then we leave the modifiers as they are.

[BcRikko]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: