Paradigm CSS is Now Available on GitHub

By Matt Todaro

Published on September 15th, 2022 @ 4:40pm

Over the next few months, I'll be making some of my personal JS libraries available to the open source community.

The article below contains an introduction to the first library, Paradigm CSS.

The project is available under the MIT license and can be found on GitHub.

Paradigm CSS is a complete "Paradigm Shift" in how we can style HTML moving forward.

It certainly will not be for everybody, but if you're already a believer in utility-based CSS frameworks, Paradigm CSS will (hopefully) become your new best friend.

While utility-based classes are not a new idea, the old paradigm we're accustomed to is writing CSS rules and shipping those in static .css files.

In the last two years, I haven't even opened a .css file... and frankly, I don't think I ever will again.

Without further ado, let's get into it...

So, What is Paradigm CSS?

Paradigm CSS is an Atomic CSS framework that was created to build lightning-fast pages, quicken development time and make it easier for large teams to work together.

Instead of pre-defining CSS rules in a stylesheet and applying them to HTML elements, with Paradigm CSS you can add dynamic pattern-based classes to your html and then make a JavaScript call to the ParadigmCSS.render() method.

Paradigm CSS will parse your HTML, write the CSS rules required to style your page and inject them into the head of the document on the fly.

Most pages built with Paradigm CSS will have their page styles rendered in 1-3ms.. faster than the human eye can process.

... and the entire library is only 1.9kB (minified and gzipped).

How long does it take to learn Paradigm CSS?

If you already know CSS, you've basically mastered Paradigm CSS already.

The only thing you need to learn is the pattern in which we construct classes.. but for now, let's look at a few examples to illustrate what's possible...

Examples	Result
:color:#FF0000	Changes the color property to #FF0000 on all devices
md:font-size:1.1rem	Sets the font-size property to 1.1rem on breakpoints md and above
md:color:#FF0000:hover	Sets the color property to #FF0000 when the element is hovered on breakpoints md and above
-lg:width:calc(100vw_-_20px)	Sets the width of the element to 100% of the viewport width - 20px on devices smaller than the lg breakpoint.
#md:padding:10px	Adds 10px of padding to the element only on the md breakpoint
print:display:none	Hides the element when printing the page

So Paradigm CSS is basically what inline styles could have been?

Yep, pretty much.

Paradigm CSS makes it possible, without ever leaving your HTML, to...

Target breakpoints (use the built-in media queries for breakpoints or set your own).
Add print styles without having to write a single media query.
Target every single CSS property (and anything that comes in the future).
Target element states (:hover, :active, :focus, etc.).
Target child elements from a parent, directly inside of your HTML.
Paradigm CSS Component classes allow you to group multiple Paradigm CSS classes together so you don't have to repeatedly write the same utility-classes. You're still able to write "pretty" code like...
```
  <a class="@btn" href="javascript:void(0)"></a>
```
Paradigm CSS Variables work in much the same way as traditional CSS variables, but these can be modified on the fly with JavaScript to add features to your website like light/dark mode, not to mention they make it a breeze to update theme colors or produce multiple mockups.
As an added benefit, since everything is HTML-based, you can create UI components that can be copy/pasted between projects and maintain their -exact- styling without worrying about whether or not you've also transferred all of the necessary CSS.

What Can I Expect While Using Paradigm CSS in a project?

Paradigm CSS is framework agnostic.
This library will work with any JavaScript UI framework.. you can use it alongside Vue, React, Angular, Svelte or plain-old Vanilla JS.
Paradigm CSS plays nicely with most existing CSS frameworks.
Chances are, you can drop the library into any existing website and start using it immediately.
You do not have to rebuild your entire website in order to adopt Paradigm CSS in your project.
While Paradigm CSS is certainly capable of handling the heavy lifting on its own, the library can also act as a "sidekick" to your current tech stack.
- A quick note on Tailwind CSS
  Please know that using Paradigm CSS alongside Tailwind CSS will require you to render styles using No-Conflict Mode.
  If you're a Tailwind CSS user be sure to read that portion of the documentation before using Paradigm CSS in your projects.
Paradigm CSS can shave ~1-2 seconds off of your page load times, when compared against popular frameworks like Bootstrap and Foundation.
Simply put, this is because CSS stylesheets are a major bottle-neck when it comes to load times.. adding additional requests and unused kB to your page.
With Paradigm CSS (~1.9kB minified and gzipped) you'll be able to delete your static .css stylesheets, thereby eliminating those additional requests and code bloat.
Your Code Will Become More Maintainable and Team Friendly
Phil Karton once said, “there are only two hard things in Computer Science: cache invalidation and naming things.”
- Naming Things
  When Adam Silver wrote MaintainableCSS, he dedicated the entire second chapter to naming stuff.
  With ParadigmCSS, the naming system follows a consistent pattern.
  There's no brainpower that has to go into naming classes yourself or figuring out what a previous dev thought the class name should be... nor do you have to memorize a bunch of shorthands.
  You can basically think of writing Paradigm CSS classes this way...
  "Write the line in regular CSS and then smash everything together to remove the white space.. if you need to keep a space, replace it with an underscore. If you're targeting a specific breakpoint, prepend it to the class. If you're targeting a specific state, append it to the class."
  Gone are the days of CSS class name collisions and specificity wars.
- Cache Invalidation
  Paradigm CSS isn't a framework that requires static .css files to be loaded with the page, of which best practices dictate you cache them inside of the browser for future visits.
  Paradigm CSS is a compiler, which means busting your users' CSS cache isn't even an issue anymore.. because their CSS cache no longer exists.
You'll Be Able to Eliminate a Considerable Amount of Junk CSS Code
Consider these common pain points...
- Most stylesheets in mid-to-large projects, especially those with many years and a team of designers/developers working together, are full of unused styles.
  Nobody wants to be the pour soul who deletes CSS rules another dev wrote only to find out it broke something unrelated due to the CSS cascade.. what we end up with is a bunch of junk code bogging down our pages.
  Separation of Concerns was a nice idea in theory.. but in practice it'll inevitably cause major headaches and slow down your load times considerably due to the mess it causes within team projects.
- Depending on the stack you're using, you may be loading every CSS rule that you may use somewhere in your application, even if the user is only going to navigate a small portion during each visit.
  To solve the page speed issue we've implemented a variety of solutions (complete with their own drawbacks)...
  - creating multiple smaller stylesheets (tedious and a real pain-in-the-arse to maintain).
  - build tools to strip out unused styles from your .css files (overkill and requires learning how to use build tools).
  - caching CSS stylesheets in the browser (and then having to make sure the cache is busted when updates are released).
  - CSS-in-JS.. requires the use of build tools to maximize their efficiency.. and most libraries end up with a ton of code bloat since everything is scoped to individual components.
    While this prevents class name conflicts it's solving an issue that Paradigm CSS solves instead by enforcing a consistent pattern-based approach to naming classes.
  ... while these solutions worked at the time, the easiest solution moving forward is to simply never write styles in a .css stylesheet ever again.
  I haven't even touched a .css stylesheet in the last two years. If I'm doing something like resetting all margins to zero or removing text decoration on all a tags I just pop that code in a style tag within the head.
  The amount of CSS that truly requires Jedi-level CSS selectors is minimal, at least in my own personal experience.

How long will it take to adopt Paradigm CSS into our project?

About a minute or so.. download the paradigm.css.min.js file (you can grab this from GitHub) and include it in your project with a script tag.

<script src="/path-to-file/paradigm.css.min.js"></script>

Whenever you'd like to render (or re-render) your page styles make a call to ParadigmCSS.render() in your JavaScript.

That's it. No build tools or package managers required.

What's Next?

This article was only meant to introduce you to Paradigm CSS by providing a brief overview of what's possible.. please be sure to read through the documentation where I'll cover everything you need to know in detail.

After you try Paradigm CSS be sure to reach out and let me know what you think, good or bad.. especially if you've got any ideas to improve the library.

Don't hesitate to reach out on Twitter @MattTodaroDev.

Happy Coding,

Matt Todaro

Creator of Paradigm CSS