CSS
PostCSS

Introducing Necssary: The Essential CSS Foundation for Every Project

"You can't build a great building on a weak foundation. You must have a solid foundation if you're going to have a strong superstructure."
Gordon B. Hinckley

Just as a strong building requires a solid foundation, a great product needs fundamental styling for a solid, maintainable layout.

Commonly used libraries for this purpose are Normalize.css and CSS Reset. These libraries are unopinionated in design but are essential for normalizing or resetting element styles and fixing browser inconsistencies.

I have always used Normalize.css as my starting point, but that never covered all the essential styling. So I found myself repeatedly adding the extra styles for every single project. To simplify this process, I created my own library, Necssary.

What is Necssary?

Necssary provides the essential styles for a solid foundation in your user interface. It eliminates the repetitive steps and simplifies the base styling required for every new project. A quick start that lets you focus on building your user interface.

What it includes

Normalize.css (v8.0.1)
box-sizing
elements reset
base styling for elements

Normalize.css

"Provides better cross-browser consistency in the default styling of HTML elements. It's a modern, HTML5-ready, alternative to the traditional CSS reset."

Box-sizing

The default box model in CSS uses content-box. When you set an element's width to 100 pixels, the content area will be 100 pixels wide. The padding or borders added to the element will increase its total width, making it wider than 100 pixels.

By setting the box-sizing property to border-box you tell the browser to include the border and padding within the specified width and height of an element. This means if you set the element's width to 100 pixels, the border and padding will be included within that 100 pixels. The content area will shrink to fit within these dimensions, making it easier to size elements.

Elements reset

Browsers apply default margins to elements. Resetting all margins to zero provides a clean slate for your design, ensuring that all spacing is intentional and consistent across different browsers.

Base styling for for elements

The opinionated base styles for specific elements that I found myself frequently modifying in every project.

Installation

To get started, install the required package.

npm install necssary

How to use

Next, import the Necssary package at the top of your CSS index file and write your project specific styling after that.

index.css

@import 'necssary';
@import './example.css';

If you are only interested in the unopinionated styling, it is possible to import only the core styles. This includes everything except the base styling for elements.

index.css

/* Contains normalize.css, box-sizing, and elements reset. */
@import 'necssary/core';

/* Contains the opinionated base styles. */
@import 'necssary/base';

This part is optional and includes example styles that are not essential for using this package.

example.css

/**
 * Example styles that are not required
 * with this package.
 */

body {
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

a {
  text-decoration: none;
}

Preview

Preview the HTML elements styling here.