All Projects β†’ callum-hart β†’ Immutable Styles

callum-hart / Immutable Styles

Licence: mit
A library for styling web interfaces with a focus on predictability and robustness. It uses immutability to remove side effects often tied to CSS, allowing UI bugs to be caught ahead of time!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Immutable Styles

Polychrome
🎨 Easy color manipulation in ~2kb (gzipped)
Stars: ✭ 286 (+314.49%)
Mutual labels:  immutable, css-in-js
css-render
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
Stars: ✭ 137 (+98.55%)
Mutual labels:  preprocessor, css-in-js
Shadow
collection of useful CLJS code
Stars: ✭ 47 (-31.88%)
Mutual labels:  css-in-js
Stylable
Stylable - CSS for components
Stars: ✭ 1,109 (+1507.25%)
Mutual labels:  preprocessor
Snackui
SnackUI πŸ‘ - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-20.29%)
Mutual labels:  css-in-js
Bankai
πŸš‰ - friendly web compiler
Stars: ✭ 1,064 (+1442.03%)
Mutual labels:  css-in-js
Immutable Xjc
immutable-xjc is a JAXB 2.0 XJC plugin for making schema derived classes immutable with optional builder pattern generator.
Stars: ✭ 57 (-17.39%)
Mutual labels:  immutable
Emotion Module
πŸ’– Emotion module for Nuxt.js
Stars: ✭ 47 (-31.88%)
Mutual labels:  css-in-js
Rosebox
CSS in Typescript
Stars: ✭ 62 (-10.14%)
Mutual labels:  css-in-js
I8086.js
16bit Intel 8086 / 80186 + X87 emulator written in TypeScript with REPL assembly compiler and tiny C compiler
Stars: ✭ 54 (-21.74%)
Mutual labels:  preprocessor
Tailwind Styled Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: ✭ 57 (-17.39%)
Mutual labels:  css-in-js
Atomize
library for creating atomic react components
Stars: ✭ 54 (-21.74%)
Mutual labels:  css-in-js
Twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
Stars: ✭ 1,051 (+1423.19%)
Mutual labels:  css-in-js
Cxxctp
DEPRECATED. USE INSTEAD github.com/blockspacer/flextool
Stars: ✭ 58 (-15.94%)
Mutual labels:  preprocessor
Treat
🍬 Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
Stars: ✭ 1,058 (+1433.33%)
Mutual labels:  css-in-js
Css In Js Utils
Useful utility functions for CSS in JS solutions
Stars: ✭ 61 (-11.59%)
Mutual labels:  css-in-js
Solpp
A solidity preprocessor and flattener CLI and library
Stars: ✭ 44 (-36.23%)
Mutual labels:  preprocessor
Raspbernetes
Raspberry Pi Kubernetes Cluster
Stars: ✭ 53 (-23.19%)
Mutual labels:  immutable
Immutable Array Prototype
A collection of Immutable Array prototype methods(Per method packages).
Stars: ✭ 56 (-18.84%)
Mutual labels:  immutable
Flame
Component library for building Lightspeed products
Stars: ✭ 65 (-5.8%)
Mutual labels:  css-in-js

A library for styling web interfaces with a focus on predictability and robustness. It uses immutability to remove side effects often tied to CSS, allowing UI bugs to be caught ahead of time!

Source Result

Features

  • ⚠️ Compile Time Errors
  • 🚫 CSS Override Prevention
  • πŸ“± Discrete Breakpoints
  • πŸ‘ͺ Strict Inheritance
  • πŸ•΅πŸ» Duplicate Property Detection
  • ⛱️ Typed Selectors
  • πŸ—Ώ Immutable Mixins
  • 🏹 Explicit Selectors

What is Immutable Styles?

Immutable styles is a cross between a CSS pre-processor and a CSS-in-JS library. Styles are written using JSX which are subsequently compiled to CSS. The library has 2 goals:

  1. Make styles for the web predictable
  2. Make styles for the web robust

If you have ever encountered styles that were neither expected nor desired you probably met a CSS side effect; most likely a consequence of:

  • a) Selectors clashing with other selectors
  • b) Selectors targeting unwanted elements
  • c) Styles overriding other styles
  • d) Elements inheriting undesirable styles

As the name suggests the library uses immutability to help remove these side effects. With immutable styles all CSS rules are immutable. An immutable CSS rule cannot change once created, which means it can never be overridden. This alone solves a, b and c (we will see the solution to d later).

FAQ

Why choose immutable styles over something else?

The most popular CSS strategies around today share one thing in common:

They all reduce overrides.

BEM uses naming conventions to modularise CSS, leveraging namespaces to encapsulate styles. CSS Modules implements local scope, where styles in one file cannot override styles in another. CSS-in-JS solutions such as styled components generate unique classes to avoid selectors clashing.

Despite the implementation differences each approach converges in regards to overrides; fewer overrides make CSS more robust and easier to maintain. The theory behind immutable styles is: if fewer overrides are better, why override at all?

Can I use immutable styles with React/AngularJS/Vue/Backbone/Elm/Clojure...?

Immutable styles is markup agnostic, which means it isn’t coupled or biased to a specific way of generating HTML. Just like a CSS pre-processor immutable styles spits out CSS which can be used on any website, rendered server or client-side.

Have any websites been built without CSS overrides?

Yes. Immutable styles evolved from an earlier open-source project of mine called mono. As part of monos R&D I built three websites without using any CSS overrides:

Facebook YouTube YouTube (Dark)

Can I Contribute?

Absolutely. This project is very welcome to feedback, fresh perspectives, feature requests, pull requests, and of course contributors ✌️

Documentation

The documentation can be found here.

Shoutouts

Shoutout to Joseph Luck and the good guys at Goodlord for the invaluable feedback on the early prototype πŸ™Œ

Licence

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].