DEV Community

Cover image for 📝 Introducing shokika.css - Lightweight Reset for Modern Web Development
hiro
hiro

Posted on

📝 Introducing shokika.css - Lightweight Reset for Modern Web Development

#css #webdev #frontend #showdev

If you're a web developer, "CSS Reset" is part of your standard toolkit. For years, libraries like normalize.css have saved us from the frustrating inconsistencies between browsers.

But times have changed. Internet Explorer support is officially a thing of the past, and most new projects exclusively target modern browsers.

This new reality begs the question: "Is a reset CSS that continues to support legacy browsers still the best choice?"

The answer might be shokika.css, a library that takes a clear stance: by specializing in modern environments, it achieves exceptional ease of use.

Why Choose shokika.css Over normalize.css?

The greatest advantage of shokika.css is its bold decision to cut ties with legacy browser support.

1. Simplicity and Lightweightness Through a Modern Focus

Libraries like normalize.css include numerous hacks and fallbacks to accommodate the quirks of older browsers. While once necessary for compatibility, this is now just "dead weight" for projects targeting modern browsers.

shokika.css sheds this weight. As a result, its file size is extremely small, and its code is clean and intuitive. Developers get the pure benefits of a reset without worrying about legacy baggage.

2. Excellent Synergy with Modern CSS Architecture

While CSS Cascade Layers is a CSS feature that can be used with any stylesheet, its true power is unlocked when combined with a pure, foundational reset like shokika.css.

By placing shokika.css in the lowest cascade layer (reset), you eliminate any risk of your reset styles unintentionally overriding your component or utility styles later on.

/* Define your cascade layers */
@layer reset, base, components;

/* Place shokika.css in the bottom-most 'reset' layer */
@import 'shokika.css' layer(reset);

/* Now you can write component styles without worrying about specificity conflicts */
@layer components {
  .button {
    /* ... */
  }
}
Enter fullscreen mode Exit fullscreen mode

The library's "do one thing well" simplicity meshes perfectly with this modern architectural approach.

How to Use (Project Integration)

shokika.css offers several ways to integrate it into your project, ensuring flexibility for any development environment.

1. CDN (The Easiest Way)

You can get started immediately by adding this single line to the <head> of your HTML file. It's perfect for prototyping or small projects.

<link rel="stylesheet" href="https://unpkg.com/shokika.css@latest/dist/shokika.min.css" />
Enter fullscreen mode Exit fullscreen mode

2. Install via Package Manager

For projects in a Node.js environment, install it using your preferred package manager.

npm

npm install shokika.css
Enter fullscreen mode Exit fullscreen mode

Yarn

yarn add shokika.css
Enter fullscreen mode Exit fullscreen mode

pnpm

pnpm add shokika.css
Enter fullscreen mode Exit fullscreen mode

3. Import into CSS/SCSS Files

After installation, import shokika.css into your project's main CSS or SCSS file.

Basic Import

@import 'shokika.css';
Enter fullscreen mode Exit fullscreen mode

Recommended Import with CSS Cascade Layers

As mentioned, using Cascade Layers allows for a more robust CSS architecture.

@layer reset, base, components;

@import 'shokika.css' layer(reset);
Enter fullscreen mode Exit fullscreen mode

4. Use with CSS-in-JS (React, Vue, etc.)

If you are using a CSS-in-JS library like Emotion or Styled Components, you can import the styles directly as a string.

Emotion Example

import { css, Global } from '@emotion/react';
import resetCSS from 'shokika.css/dist/string';

const globalStyle = css`
  ${resetCSS}
  /* You can add your own global styles here */
`;

export const CSSReset = () => <Global styles={globalStyle} />;
Enter fullscreen mode Exit fullscreen mode

Styled Components Example

import { createGlobalStyle } from 'styled-components';
import resetCSS from 'shokika.css/dist/string';

const GlobalStyle = createGlobalStyle`
  ${resetCSS}
`;
Enter fullscreen mode Exit fullscreen mode

Conclusion: Choose the Right Reset for Your "Modern" Project

The role normalize.css has played in web development is immense. However, if your next project targets only modern browsers, shokika.css is a more lightweight, easier-to-handle, and more future-forward choice.

It's time to shed the legacy weight and start developing on a clean, modern foundation. shokika.css is the perfect tool for the job.

If you find shokika.css helpful, please consider giving the project a ⭐️ on GitHub!

Your support helps the project reach more developers and encourages further development.

shokika.css GitHub Repository

Top comments (4)

Collapse
 
dotallio profile image
Dotallio •

Love how clean the cascade layers setup looks with this, feels like a breath of fresh air for modern stacks. Did you run into any real-world issues from dropping legacy browser support?

Collapse
 
hiro0218 profile image
hiro •

Cascade layers themselves aren't a feature of this reset CSS, but since we've verified and tested it more thoroughly compared to traditional reset CSS, I think it's quite useful. As for dropping legacy browser support, we haven't encountered any major issues so far. I believe the end of IE11 support has been a significant factor.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

Very cool, I love seeing someone finally ditch all the legacy browser stuff. This is extremely impressive

Collapse
 
hiro0218 profile image
hiro •

Thank you! Traditional reset CSS included a lot of unnecessary definitions just to support legacy browsers. Since those bring no real benefits to users today, I wanted a reset CSS that removes all that unnecessary stuff.