CSS
Magic of CSS, CSS for JS Developers & Debugging CSS are nice resources. Every Layout is neat overview of most common layouts. Modern CSS Reset, Understanding Layout Algorithms & Defensive CSS are good reads. Ahmad Shadeed's blog is incredible.
Often use these CSS loaders. Open Props are amazing. Trying out new features now from recent State of CSS.
Recently been loving using UnoCSS together with styled components pattern. Be the browser’s mentor, not its micromanager is a must watch on building responsive websites.
Nice templates
Code
css
<!-- unset styles -->
all: unsetNotes
- Grid for layout, Flexbox for components
- ID's are unique.
- Each element can have only one ID.
- Each page can have only one element with that ID.
- Classes are NOT unique.
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
- The DOM is just a tree of objects. CSS selects parts of that tree and applies attributes to those objects. It's all just code, it's just a shorthand for adding a bunch of attributes to a bunch of objects.
- Always design your CSS format from the inside out
- format the elements within their container so that they look correct regardless of the size of the container.
- similarly format those containers within their own containers
- repeat until
<body>is the containers - never use absolute widths (px, in, cm, etc.) for anything
- body tag takes up the whole width and height of the browser screen.
- Hex colors are super common... and inconvenient as heck. Try hsl instead.
- If you make it a rule to always use attributes instead of classes to apply CSS to element states (not variants), you’ll force yourself to make your app more accessible (Similar to React Testing Library). If you’re using CSS-in-JS this also helps create more static styles.
- I feel like negative margins are probably the most under-used layout feature. Layouts become so much more manageable when an element's size in the document flow is decoupled from its visible size on screen.
overflow: clipis faster thanoverflow: hidden- If your site has a dark theme, make sure to set:
:root {color-scheme: dark}So scroll bars are also dark. - Sometimes I’ll make a rule that highlights everything, and then progressively refine the selector until it hits the things I want it to.
Links
- Code Guide - Standards for developing consistent, flexible, and sustainable HTML and CSS.
- CSS Reference - Free visual guide to the most popular CSS properties. (Code)
- CSS Blocks - High performance, maintainable stylesheets.
- Opticss - CSS Optimizer.
- CSS Puns
- Magic of CSS (Code)
- Min - World's smallest (995 bytes) CSS framework.
- Emotion - Performant and flexible CSS-in-JS library.
- Why We Use Styled Components at Decisiv
- The case for CSS modules - Mark Dalgleish
- Michael Chan - Inline Styles: themes, media queries, contexts, & when it's best to use CSS (2015)
- Understanding the CSS box model for inline elements
- astroturf - An "artificial" css-in-js for those that want it all.
- Pesticide - Kill your CSS layout bugs. (Code)
- Spectre - Lightweight, Responsive and Modern CSS Framework.
- Tachyons - Functional CSS for humans.
- CSS Animation 101
- Understanding static and relative positioning
- Tailwind utility-first CSS framework
- CSStype - Strict TypeScript and Flow types for style based on MDN data.
- normalize.css - Modern alternative to CSS resets.
- app-reset.css - Minimal set of reset CSS specifically for web applications.
- Julia Muzafarova CSS Pens
- CSS Modules - Documentation about css-modules.
- nano-css - CSS-in-JS library that you can actually use in production. Motto of nano-css is simple: create the smallest possible CSS-in-JS library and provide all features of any other library through addons.
- Why I Write CSS in JavaScript (2019)
- Styled System - Responsive, theme-based style props for building design systems with React.
- Rebass - React primitive UI components built with styled-system..
- TypeStyle - Making CSS type safe.
- The Three Tenets of Styled System (2019)
- DropCSS - Simple, thorough and fast unused-CSS cleaner.
- CSS Standardization - The State of the Web with Jen Simmons (2019)
- Water.css - Just-add-css collection of styles to make simple websites just a little nicer. (HN)
- Loaders.css - Delightful and performance-focused pure css loading animations.
- Artem Sapegin: Custom CSS is the Path to Inconsistent UI (2018)
- Learn CSS Layout the pedantic way (Code)
- CSSFX - Beautifully simple click-to-copy CSS effects. (Code)
- CSS Working Group Wiki
- CSS Working Group Editor Drafts (Code)
- CSS Houdini - Low-level APIs that exposes parts of the CSS engine. (HN)
- CSS Houdini Experiments
- CSS-Only Chat - Truly monstrous async web chat using no JS whatsoever on the frontend.
- Theme UI - Build consistent, themeable React UIs based on design system constraints and design tokens.
- Nice comment on problems & solutions to writing CSS
- tachyons tldr
- A real-life journey into the opinionated world of 'utility-first' CSS (2018)
- CSS and Scalability (2016)
- cssdb - Database of staged CSS features. (Code)
- Relearn CSS layout: Every Layout - How to better harness the built-in algorithms that power browsers and CSS. (HN) (Blog)
- Basscss - Low-level CSS Toolkit.
- PurgeCSS - Remove unused css.
- CSS Remedy - Start your project with a remedy for the technical debt of CSS.
- CSS Camera - New way to see a web page with CSS3 3D transform.
- Devices.css - Modern devices in pure CSS.
- clean-css - Fast and efficient CSS optimizer for Node.js platform and any modern browser.
- 25 Days of CSS Animations: Teaching Myself CSS through Motion Design (2019)
- TACHYONS theme editor
- Starter files, final projects and FAQ for Advanced CSS course
- Pure CSS – Lace (HN)
- Pure CSS Drawing Essentials - Top 5 CSS properties I rely on to produce Pure CSS art.
- Artem Sapegin: Say Hello to Box, Flex and Stack: Layouts in the Component Era (2019)
- CSS Utility Classes and "Separation of Concerns" (2017) (HN)
- Роман Дворнов — CSS definition syntax (Russian)
- The Power (and Fun) of Scope with CSS Custom Properties (2019)
- CSS Architecture for Modern JavaScript Applications (2019)
- Browser Default Styles
- The box model is not layout (2019)
- MDN CSS Layout
- Smooth CSS shadows generator
- CSS Layout - Collection of popular layouts and patterns made with CSS. (Code)
- CSS Protips - Collection of tips to help take your CSS skills pro.
- Focus Overlay - Library for creating animated overlays on focused elements.
- Six Questions to Understand the CSS Box Model (2017)
- High-level advice and guidelines for writing sane, manageable, scalable CSS
- CSS Circles (2019)
- CSShake - CSS classes to move your DOM.
- JSS - Authoring tool for CSS which uses JavaScript as a host language.
- List of 300+ CSS properties
- Magical Rainbow Gradients with CSS Houdini and React Hooks (2020)
- Shapy - Gradient shape editor that helps you discover and explore the power of CSS gradients. (Code)
- CSS clip-path maker
- CSS Scroll Shadows - Adjust the controls and see the CSS scroll shadows change. (Code)
- CSS Triangle Generator
- Tint & Shade Generator - Display tints and shades of a given hex color in 10% increments.
- Writing efficient CSS selectors (2011)
- A Modern CSS Reset (2019) (Code)
- The CSS Cascade - How browsers resolve competing CSS styles.
- Intrinsic Sizing In CSS (2020)
- CSS in Real Life blog
- Old CSS, new CSS (2020) (HN)
- Learn CSS Positioning
- CSS Triggers
- Bounce.js - Tool and JS library that lets you create beautiful CSS3 powered animations. (Code)
- Selectors Explained - Translate CSS selectors into plain English. (Code)
- Simpsons in CSS (Code) (HN)
- CSS-Element-Queries - High-speed element dimension/media queries in valid css. (Code)
- Hint.css - Pure CSS tooltip library for your lovely websites. (Code)
- Intrinsic Sizing In CSS (2020)
- CSS Zen Garden (HN)
- CSS3 Patterns Gallery (Code)
- All CSS named colors on a single page (Code)
- CSS Findings From The New Facebook Design (2020)
- MoreToggles.css - Pure CSS library that provides you with a variety of nice-looking toggles. (Code)
- Styling Ordered Lists with CSS Counters (2020)
- postcss-trash-killer - Postcss plugin which wil be remove all unused css.
- Solved with CSS! Logical Styling Based on the Number of Given Elements (2018)
- CSS Doodle - Web component for drawing patterns with CSS. (Code)
- Sakura - Minimal classless css framework / theme.
- Sakura Bookmarklet - Enable Sakura.css on any website.
- Skeleton - Dead Simple, Responsive Boilerplate for Mobile-Friendly Development. (Code)
- Do We Actually Need Specificity In CSS? (2015) (HN)
- The Simplicity of Specificity (2015)
- Concentric-CSS - Standard order for CSS properties that starts at the outer edge of the box model and moves inward.
- Pattern.css - CSS only library to fill your empty background with beautiful patterns. (Code) (HN)
- Watched Box - Easiest way to get working with ResizeObserver and creating container queries with JavaScript.
- Hamburgers - Tasty CSS-animated Hamburgers. (Code)
- Hero Generator - Create a nice hero image for your site or app. (Code)
- PrefaceCSS - CSS Boilerplate for minimalists. (Code)
- You Need to Know CSS - CSS tricks web developers need to know. (Code)
- Pure CSS Landscape - An Evening in Southwold (Video)
- Modern CSS Solutions (Code)
- A Single Div - CSS drawings with only one HTML element. (Code)
- CSSWG meeting minutes
- new.css - Classless CSS framework to write modern websites using only HTML. (Code) (HN) (Night Theme)
- CSS Refresher Notes
- Destyle.css - Opinionated reset stylesheet that provides a clean slate for styling your html. (Code)
- Fast Browser Animations (2020)
- Digital nesting - Devon's collection of custom CSS.
- React CSS Loaders - Collection of pure CSS React loading components. (Code)
- css-select - CSS selector compiler/engine.
- Introducing CSS Scroll Snap Points (2019)
- Ask an expert: Why is CSS . . . the way it is? (HN)
- Glue - Simple command line tool to generate CSS sprites.
- stylis.js - Light–weight CSS Preprocessor.
- An Overview of CSS: An Art, a Science, a Nightmare (2019)
- Basic.css - Classless CSS Starter File. (HN) (Code)
- Tufte CSS - Simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. (Code)
- PurifyCSS - Remove unused CSS. Also works with single-page apps.
- Adding dark mode support (2020)
- SelectorGadget - Point and click CSS selectors. (Code)
- The Mad Magazine Fold-In Effect in CSS (2020) (HN)
- CUBE CSS - CSS methodology that’s orientated towards simplicity, pragmatism and consistency. (Article)
- Awesome CSS Variables
- Critical-ish CSS Extraction (2020)
- 7 CSS properties I had no idea about (2020)
- concrete.css - Simple and to the point CSS microframework. (Web)
- Sass - Extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more.
- Color Theme Switcher (2020)
- CSS Tips for New Devs (2020)
- The Cognitive Complexity of CSS (2020)
- Drop-in Minimal CSS - Overview of barebones drop-in minimal CSS boilerplate frameworks. (Code)
- CSS Road Guide
- paper.css - Lightweight, modern CSS to add some flair to your web-things. (Code)
- Learn CSS From Scratch course
- CSS Design Awards
- Surprising Things That CSS Can Animate (2020) (HN)
- A Complete Guide to Dark Mode on the Web (2020)
- Uncommon CSS Properties (2020)
- 1-Line Layouts - 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. (Article) (Lobsters)
- The CSS Standardization Process (HN)
- CSS News July 2020
- ZeroDivs - UI editor for single-element CSS illustrations. (HN)
- Style Stage - Modern CSS showcase styled by community contributions. (Code) (Article)
- Learn CSS with CSS For Designers - Practical guide to CSS teaches you everything you need to know and nothing you don’t.
- Things I Wish I’d Known About CSS (HN)
- css-media-vars - Brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS. (HN) (Code)
- Renderization of Conic gradients (2020)
- PostCSS 100vh Fix - PostCSS plugin to fix height/min-height: 100vh on iOS.
- Infinite Scroll without Layout Shifts (2020)
- Centering in CSS: A Complete Guide
- awsm.css - Simple CSS library for semantic HTML markup.
- content-visibility - New CSS property that boosts your rendering performance.
- Nailing the Perfect Contrast Between Light Text and a Background Image (2020)
- The Languages Which Almost Became CSS
- Incomplete List of Mistakes in the Design of CSS
- CSS Specificity calculator
- How I Structure My CSS (for Now) (2020)
- Gradient Magic - Fantastic and Unique CSS Gradients.
- CSS Weekly
- A Lightweight Masonry Solution (2020) (CodePen)
- Enhancing User Experience With CSS Animations
- Make your first CSS art (2020)
- The Thing With Leading in CSS (2020)
- Bahunya - 10KB classless CSS framework with responsive typography, navbar, syntax highlighting, etc. (Web)
- Flowing Text Around Images (Lobsters)
- Debugging CSS - Book with lots of tips and techniques on how to debug CSS the right way with easy and studied methods.
- Learn CSS Centering
- blocks.css - Add some dimension to your page with blocks. (Code)
- Making a Rotating Icon Button in React (2020)
- Finding The Root Cause of a CSS Bug (2020)
- CSS Demystified - Start writing CSS with confidence.
- A Complete Guide to CSS Media Queries (2020)
- Custom bullets with CSS ::marker (2020)
- Easing Functions Cheat Sheet (Code)
- Keyboard-Only Focus
- :focus-visible Is Here (2020)
- In Defense of Utility-First CSS (2018)
- PureCSS Character (Code)
- Balloon.css - CSS tooltips for HTML elements. (Code)
- Blunt - CSS framework strictly for layouts.
- How to Create a Realistic Motion Blur with CSS Transitions (2020)
- Link hover animation (circled)
- min(), max(), and clamp(): three logical CSS functions to use today (2020)
- CSS Buttons - Pure HTML & CSS Buttons For Web Development. (Code)
- The State of CSS (Code)
- CSS Background Patterns
- Manipulating Colors With CSS Variables and HSL (2020)
- CSS for JavaScript Developers - Online course that teaches the fundamentals of CSS for React/Vue devs. (How it was made)
- Custom CSS via Serverless Proxy (2020)
- How to make CSS Animations (2020)
- Everything I Have Done to Make CSS Wizardry Fast
- Simple Start to CSS variables (2020)
- PostCSS CSS Variables - PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation.
- no.css - Tiny CSS framework with almost no classes and some pure CSS effects.
- 16 CSS Secrets to improve Web Designs (2020)
- Hell Yes! CSS! - CSS Zines.
- Easing Gradients - Create and preview your own easing gradients in CSS. (Code)
- CSSTree - Tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations.
- CSS Scan Pro - Re-imagined Devtools for web design.
- The Rules of Margin Collapse (2020)
- CSS Scroll Snap (2020)
- Houdini.how (HN) (Code)
- Panzoom - Library for panning and zooming elements using CSS transforms.
- Centering in CSS (2020) (HN)
- modern-normalize - Normalize browsers' default style.
- PostHTML Inline CSS - PostHTML plugin for inlining CSS to style attrs.
- Simple.css - Classless CSS framework. (Code)
- css-what - CSS selector parser.
- PostCSS Language Support - Support for modern and experimental CSS within Visual Studio Code.
- Custom Properties as State (2021) (HN)
- CSS-Tricks Conferences (Code)
- Natural Selection - Collection of best-practice CSS selectors.
- HStack and VStack in CSS - CSS layout components that (basically) horizontally and vertically stack anything.
- State of CSS 2020
- Awesome CSS Frameworks
- RFS - Unit resizing engine which was initially developed to resize font sizes.
- Understanding Clip Path in CSS (2021)
- Inactive CSS - List of rules for when CSS properties have no effect.
- Classcat - Build a space-separated class attribute quickly.
- CSS: prefers-color-scheme (2021)
- How to select elements that are not children of other elements in CSS (2021)
- Things You Can Do With CSS Today (2021)
- Meanderer - Micro-library for scaling CSS motion path strings.
- SmolCSS - Minimal snippets for modern CSS layouts and components. (Code)
- Fluid typography with CSS clamp (2021)
- CSS Creatures (Code)
- minireset.css - Tiny modern CSS reset. (Web)
- Getting Deep into CSS Shadows
- The Beauty Of Tiny Enhancements In CSS (2021)
- An interactive guide to CSS transitions (2021) (HN)
- Diving into the ::before and ::after Pseudo-Elements (2021)
- AVO: BEM Dialect Using Data Attributes
- The Importance of Learning CSS (2021) (HN)
- CSS Auditing Tools (2021)
- Exploring @property and its Animating Powers (2021)
- Digging Into CSS Logical Properties (2021)
- CSS Generators (2021)
- Debugging layout shifts (2021)
- Charts.css - CSS data visualization framework. (HN) (Code)
- Creating Directionally Lit 3D Buttons with CSS (2021)
- Smooth Shadow - Make a smooth shadow.
- Not Your Typical Horizontal Rules (2021)
- Handling Text Over Images in CSS (2021)
- cool.css - Last CSS framework I'll (hopefully) ever have to build. (Code)
- Animating Underlines with CSS (2021)
- Grid Component - Component that can arrange items according to the type of grids.
- Tools for Auditing CSS (2021)
- Container Queries are actually coming (2021)
- Building a Magical 3D button with HTML and CSS (2021) (HN) (Tweet)
- Dark mode in 5 minutes, with inverted lightness variables (2021)
- How to Improve CSS Performance (2021)
- 100 underline/overlay animations | The ultimate CSS collection (2021)
- My Website is More Responsive Than Yours (2021)
- Say Hello To CSS Container Queries (2021) (Tweet)
- Awesome Container Queries
- Overflow Issues In CSS (2021)
- Float an Element to the Bottom Corner (2021)
- Transition.css - Easy transitions with clip-path. (Code)
- Shortstack - Minimal Rollup + PostCSS modern syntax starter template.
- CSS Tips (2020) (HN)
- CSS Container Query Proposal & Explainer
- CQFill - Polyfill for CSS Container Queries.
- A Complete Guide to Custom Properties (2021)
- Tacit - CSS Framework for Dummies, Without Classes. (Web)
- How to Create Actions for Selected Text With the Selection API (2021)
- Book insights: The New CSS Layout (2021)
- CSS Card with hover animation and mobile fallback (2021)
- CSS Hell - Collection of common CSS mistakes, and how to fix them. (Code)
- Component-level art direction with CSS Container Queries (2021)
- Wallace CLI - Pretty CSS analytics in your terminal.
- No, Utility Classes Aren't the Same As Inline Styles (2021)
- Learn CSS - Evergreen CSS course and reference to level up your web styling expertise. (HN)
- How to Favicon in 2021
- 25 Years of CSS (2021) (HN)
- CSS Container Queries: Use-Cases And Migration Strategies (2021)
- Parsel - Tiny, permissive CSS selector parser. (Web)
- What the heck, z-index? - Exploring stacking contexts, one of the most misunderstood mechanisms in CSS.
- Critical - Extract & Inline Critical-path CSS in HTML pages.
- CSS Layout Generator
- PostCSS Focus - PostCSS plugin to add :focus selector to every :hover for keyboard accessibility.
- CSSBootcamp.com - Structured, Guided, Curriculum for CSS.
- Animate.css - Cross-browser library of CSS animations. (Code)
- Real-world CSS vs. CSS-in-JS performance comparison (2021) (HN)
- Glassmorphism CSS Generator
- Glass UI - CSS UI library based on the glassmorphism design principles.
- Miriam Suzanne - Container Queries & The Future of CSS (2021)
- CSS Café - YouTube
- Keeping it simple with CSS that scales – Andy Bell (2020)
- Trigonometry in CSS and JavaScript: Beyond Triangles (2021)
- What does 100% mean in CSS? (HN)
- 83 Beautiful CSS buttons examples
- Confusing things about CSS still (2021)
- CSS: Avoid horizontal scrolling (2021)
- The Large, Small, and Dynamic Viewports (2021)
- My First CSS (2021) - What I Wish I Knew About CSS When Starting Out As A Frontender. (HN)
- CSS Nesting Module
- CSS areas people struggle with the most (2021)
- Favorite “quick wins” with CSS
- Aligning a Button Label Vertically (2021)
- CSS Foundations Online Workshop - Emma Bostian (2021) (Tweet)
- sanitize.css - CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. (Web)
- Never remove CSS outlines (2013)
- PaperCSS - Less formal CSS framework. (Code)
- The World of CSS Transforms
- An Interactive Guide to CSS Keyframe Animations
- You want enabling CSS selectors, not disabling ones (2021) (HN)
- Building A Stepper Component (2021)
- Pollen - Library of CSS variables inspired by TailwindCSS. (Docs) (HN)
- Less Absolute Positioning With Modern CSS (2021)
- Grainy Gradients playground - CSS Noise gradient generator. (Code)
- Designing Beautiful Shadows in CSS (2021) (HN)
- Grainy Gradients (2021)
- CSS Container Query Units (2021)
- How I Learnt To Stop Worrying And Love Animating The Box Model (2021)
- Shadow Roots and Inheritance (2021)
- Awesome CSS Learning - Awesome list limited to the best CSS learning resources.
- PostCSS Hover Media Feature - Extracts and wraps rules containing :hover pseudo-classes in @media (hover: hover) {} media queries.
- Simplifying Form Styles With accent-color (2021)
- Dynamic CSS color themes with similar contrasts (2021)
- How To Build An Expandable Accessible Gallery (2021)
- AVIF in CSS - PostCSS plugin to use AVIF in CSS background.
- A Guide To CSS Debugging (2021)
- CSS to XPath
- Conditional Border Radius In CSS (2021)
- Smart CSS Solutions For Common UI Challenges (2021)
- 100 bytes of CSS to look great everywhere to style text
- New Simple and Lighter CSS Reset - Removes all the default styles which we are getting on specific HTML elements except the ‘display’ property. (Web) (Article)
- Pylon - Declarative layout primitives for CSS & HTML. (Code)
- What do I need to read to be a great at CSS? (2021) (HN)
- The strangely difficult problem of drawing a box around text (HN)
- Evaluating Clever CSS Solutions (2021)
- GUI Challenges - YouTube (Code)
- Squircle CSS Houdini - Tiny CSS Houdini module that allows to add a squircle shape to HTML elements.
- CSS Destructured Course
- Improving CSS Architecture with Cascade Layers, Container Queries, Scope, by Miriam Suzanne (2021)
- Complete Guide to CSS Flex and Grid Book
- CSS Tricks to Create that Dark Futuristic Web3 Look (2021)
- Bold on Hover... Without the Layout Shift (2020)
- Reasoning about Declarative Styles (2020)
- CSS Shadow Palette Generator (Article) (HN)
- Layout patterns - Collection of layout patterns built using modern CSS APIs.
- The new responsive design (2021)
- Discover CSS polygon shapes (Code)
- Parallax Powered by CSS Custom Properties (2021)
- 1-Line CSS Layouts (HN)
- Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode (2021) (Article)
- CSSBattle - CSS code-golfing game.
- CSS Animation: translate3d, backdrop-filter and custom tags (2021)
- My Custom CSS Reset (2021) (HN)
- Container Query Polyfill
- parcel-css - CSS parser, transformer, and minifier written in Rust. (Article) (HN)
- Two flexbox & grid behaviors most people don't know about (2021)
- postcss-rs - Fast and 100% API compatible postcss replacer, built in Rust.
- A Handy Little System for Animated Entrances in CSS (2021)
- Responsive Layouts, Fewer Media Queries (2021)
- Popular third-party library everyone's heard of that you style by overriding their CSS/targeting their classes
- Improving performance with Islands Architecture and PostCSS (2021) (Tweet)
- Open Props - CSS custom properties to help accelerate adaptive and consistent design. (Code) (Tweet) (Video) (Video) (HN)
- The fundamentals of CSS layout | Workshop (2021)
- img2css - Convert any image to pure CSS. (Code)
- How to implement dragging, constraints, and rubber banding in CSS
- Defensive CSS (2021) (HN)
- NWSAPI - Fast CSS Selectors API Engine.
- Pure CSS content animation
- Responsive iframes with the CSS aspect-ratio property (2021)
- CSS Tokenizer - Tokenize CSS according to the CSS Syntax.
- EsifyCSS - Generates ES modules from CSS.
- zss - CSS layout engine and document renderer, written in Zig.
- Standardizing Focus Styles With CSS Custom Properties (2021)
- Right-to-left Styling in CSS (Code)
- Fancy Border Radius Generator - When you use eight values specifying border-radius in CSS, you can build organic looking shapes. (Code)
- Wide variety of animations done using only CSS
- Pico.css - Minimal CSS Framework for semantic HTML. (Code) (HN)
- DoodleCSS - Simple hand drawn HTML/CSS theme. (Code) (HN)
- Consistent, Fluidly Scaling Type and Spacing (2021)
- The State of CSS 2021
- UI Snippets - Collection of UI Snippets. (Code)
- Smoothly Reverting CSS Animations (2021)
- CSS 3D Clouds (Code)
- Dynamic CSS with Custom Properties (aka CSS Variables)
- Styles of text selection (2021)
- CSS Section Separator Generator (Code)
- Stylist - CSS-in-Rust styling solution for WebAssembly Applications.
- Almond.CSS - Collection of CSS styles to make simple websites look nicer and better. (Code)
- Pure CSS device fingerprinting
- Ban Outer CSS Margins from Components (HN) (HN)
- unocss-preset-scalpel - Scalpel Preset for UnoCSS.
- CSS Gradients that avoid the “gray dead zone” (HN)
- A Deep CSS Dive Into Radial And Conic Gradients (2022)
- CSS Speedrun - Small game to test and improve your CSS knowledge. (Code)
- Getting Started With CSS Cascade Layers (2022)
- CSS Polka Dot Generator
- Fancy CSS Borders Using Masks (2022)
- postcss-design-tokens - PostCSS plugin that provides a function to retrieve design tokens expressed in JS or JSON, within CSS.
- Juice - Given HTML, juice will inline your CSS properties into the style attribute.
- Aspect Ratio is Great (2022) (HN)
- cva - Class Variance Authority.
- CSSUI - Collection of interactive UI components in pure CSS.
- Hello, CSS Cascade Layers (2022)
- PostCSS Plugins
- A Complete Guide to CSS Cascade Layers (2022)
- Things the CSS Spec Folks Got Right (2022) (HN)
- Load Awesome - Awesome collection of — Pure CSS — Loaders and Spinners.
- Classless CSS - List of classless CSS themes and frameworks.
- CSS as the back end – introducing Cascading Server Sheets (HN)
- New CSS Features In 2022
- CSS Analytics - Project Wallace
- CSS-Checker - Find and Reduce Similar and Duplicated CSS Scripts.
- Telecss - CSS tokenizer, parser, transformer, written in Rust.
- Taming CSS Variables with Web Inspector | WebKit (2022)
- How we migrated entirely to CSS Modules (2022)
- When or If (2022) (HN)
- CSS Cascade Layers Explained (2022)
- Master Styles - Virtual CSS language with enhanced syntax. (Code)
- Josh Comeau – Secret Mechanisms of CSS (2022)
- Understanding Layout Algorithms in CSS
- Load Config - Autoload Config for PostCSS.
- CSS Contain and Content Visibility
- Microtip - Modern, minimal and accessible CSS tooptips. (Code)
- Avoiding layout shift by putting the CSS in charge (2021) (Tweet)
- Cascade - CSS to sound live coding system.
- PostCSS - Tool for transforming CSS with JavaScript. (Code) (Web Code)
- Rust implementation of CSS Syntax Level 3
- Create a rad loading animation with CSS
- CSS Parent Selector (2022) (Tweet)
- Browser in the Dark: flashlights with CSS and canvas (HN)
- Declarative design (2022)
- Loaders | UI Ball - Modern, tree-shakeable loaders & spinners for React. Made with CSS, HTML and a splash of SVG. (Code)
- The Future of CSS: CSS Toggles (2022)
- Stylify - Library that generates utility-first CSS dynamically based on what you write. (Code)
- CSS GUI - Visual development environment for CSS.
- 18 GitHub Repositories to Become a CSS Master (2022)
- Building a combined CSS-aspect-ratio-grid (2022)
- Turret CSS - Responsive Front-end Framework for Accessible and Semantic Websites. (Code)
- Is .css a bad idea? Is inlining the way forward? (2022)
- Ordering CSS Declarations (2022) (HN)
- Favorite Modern CSS features (2022)
- CSS Stats - Visualize various stats about your CSS. (Code)
- State of CSS 2022 (Tweet) (Video) (Tweet) (HN)
- The Surprising Truth About Pixels and Accessibility: should I use pixels or rems? (Tweet)
- First Look At The CSS object-view-box Property (2022) (Tweet)
- Spacing in CSS (2020)
- What new property / value / CSS superpower are you most excited about? (2022)
- CSS: Absolutely positioning things relatively (2022) (HN)
- Min-Max-Value Interpolation - Tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range. (Code)
- global.css - Personal global (Post)CSS file used in all my projects.
- Lesser-Known And Underused CSS Features In 2022
- Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D (2022)
- grass - Near-feature-complete Sass compiler written purely in Rust.
- Stretch - High performance flexbox implementation written in rust.
- 100 Modern CSS Buttons
- Pure CSS image zoom using CSS primitives
- Paper Prototype CSS (2022)
- Moonshine CSS - High-proof atomic CSS framework.
- Star Wars Scene Transition Effects in CSS (2022)
- finder - CSS Selector Generator.
- CSS box-sizing (2022)
- Complex vs Compound Selectors (2022) (Tweet)
- Mobile-First CSS: Is It Time for a Rethink? (2022) (HN)
- Elly Loel CSS Reset (Tweet)
- PostCSS Media Minmax - Writing simple and graceful Media Queries.
- Defensive CSS - Practical CSS and design tips that helps in building future-proof user interfaces. (Twitter) (HN)
- Create Diagonal Layouts Like It's 2020
- Whirl - CSS loading animations with minimal effort. (Code)
- Anthony Fu's 100 days - 100-day project of exploring design, compform, and new things. (Code)
- CSS Value Processing (2020)
- Shader-like holographic effects with CSS (2022) (HN) (Tweet)
- Bramus Van Damme | The CSS Cascade, a deep dive (2022)
- swc/css - SWC CSS binding.
- The CSS behind Figma (2022) (HN)
- Want your layouts to look Great? Try Adding DEPTH (2022)
- CSS Scan - Fast and easy way to check and copy CSS. (HN)
- Figma: Illuminating dark mode (2022) (Tweet)
- Solving “The Dangler” Conundrum with Container Queries and :has() (2022)
- css_parser - CSS Lexer & Parser implementation for Deno.
- Fade-in animation that is not so boring in CSS
- Finer grained control over CSS transforms with individual transform properties (2022)
- Adam Argyle | Oh Snap! (2022) (Tweet)
- Onu-UI - Web glassmorphism components generate by UnoCSS.
- Michelle Barker | Creative CSS Layout (2022) (Slides)
- Puppertino - CSS framework based on Human Guidelines from Apple.
- Polygon Shapes
- Parents counting children in CSS (2022)
- ress - Modern CSS reset.
- Modern alternatives to BEM (2022) (Tweet)
- Lightning CSS - Extremely fast CSS parser, transformer, bundler, and minifier written in Rust. (Tweet) (Twitter)
- The Power of CSS Blend Modes (2022)
- Subtle, yet Beautiful Scroll Animations (2022)
- PostCSS LightningCSS - PostCSS plugin uses Lightning CSS to compile and minify your CSS.
- 58 bytes of CSS to look great nearly everywhere (HN)
- Raffia - CSS/Sass/SCSS/Less parser, all in one.
- Inverted Media Queries and Breakpoints (2022)
- Horizontal Scrolling in a Centered Max-Width Container (2022)
- Website Themes and Color Schemes (2022)
- Randomness in CSS (2022)
- 100 Days Of More Or Less Modern CSS (2022)
- Vanilla Extract + CSS variables removes the boundary between your JS and CSS
- Critical CSS? Not So Fast! (2022) (Response)
- Animating Layouts with the FLIP Technique (2020)
- Delightful UI Animations With Shared Element Transitions API (2022)
- Simplifying the Craigslist Gallery (2022) (Lobsters)
- Pokemon Deckz - Collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. (Code) (HN)
- The wasted potential of attribute selectors in CSS (2022) (Lobsters)
- Let's Make One of Those Fancy Scrolling Animations Used on Apple Product Pages (2020) (Reddit)
- CSS reset for 2022 and beyond (Tweet)
- CSS checkbox examples (HN)
- typed-scss-modules - Generate type definitions (.d.ts) for CSS Modules using SCSS.
- The New CSS Media Query Range Syntax (2022)
- Xess 2: CSS variable edition (2022)
- Making Tables Responsive With Minimal CSS (2019)
- Is there too much CSS now? (2022) (HN)
- SpinKit - Simple CSS Spinners. (Code)
- The evolution of scalable CSS (2022) (HN)
- BlurHash to CSS - Converts a BlurHash to a CSS Object using TypeScript, Rust, and WebAssembly.
- Styling form states without JS
- Tree views in CSS (HN)
- Terminal CSS - Modern and minimal CSS framework for terminal lovers. (Code)
- CSS Analyzer - Goes through your CSS to find all kinds of relevant statistics.
- Color Formats in CSS (2022) (HN)
- The large, small, and dynamic viewport units (2022)
- CSS Infinite and Circular Rotating Image Slider (2022)
- PostCSS-Lit - PostCSS syntax for extracting CSS from template literals inside JS/TS files.
- Super Useful CSS Resources (2022)
- Practical Guide to CSS Media Queries (2022)
- Animated Background Stripes That Transition on Hover (2022)
- CSS Declaration Sorter - Sort CSS declarations fast and automatically in a certain order.
- A Few Times Container Size Queries Would Have Helped Me Out (2022)
- Logical Border Radius (2022)
- Help choose the syntax for CSS Nesting (2022) (HN)
- iPhone 14 Pro with dynamic island, on the web
- CSS Style Queries (2022)
- Things CSS Could Still Use Heading Into 2023 (HN)
- CSS challenge: skewed highlight (2022)
- checkcss - Detect DOM elements that reference undefined CSS classes.
- 5 under-utilized CSS rules
- The Future of CSS: Cascade Layers (CSS @layer) (2021)
- CSS Architecture (2022)
- Keeping Your CSS Small: scopes, containers, and other new stuff (2022)
- How to create a 3D space using CSS (2023) (HN)
- PostCSS Values Parser - CSS property value parser for PostCSS.
- Conditional CSS (2023) (HN)
- The truth about CSS selector performance (2023) (HN)
- Great CSS posts/videos (2023)
- Broider - LoFi CSS border embroidery design maker. (Code) (HN)
- dprint-plugin-css - Fast CSS code formatting using dprint.
- CSS Pattern: Fancy backgrounds with CSS gradients (Code)
- skribble - Fully typed atomic CSS compiler for rust, node, deno and the browser.
- The Guide To Responsive Design In 2023 and Beyond
- My favorite 3 lines of CSS (2023) (HN)
- How the CSS box-sizing property works (2023)
- CSS color-mix() (2023)
- A Fancy Hover Effect For Your Avatar (2023)
- Meshgrad - Tiny utility for generating CSS Mesh Gradients. (Code)
- My CSS Wishlist (2023)
- CSS grammar for Tree-sitter
- CSS Leading Trim - CSS property that allows you to remove the leading whitespace from a block of text.
- Moving Backgrounds (2023)
- Different Ways to Get CSS Gradient Shadows (2023)
- WebKit Supports Nested CSS (2023) (HN)
- Do we need CSS flex-wrap detection? (2023) (Tweet)
- Container queries land in stable browsers (2023)
- My CSS Wishlist · Jens Meiert (2023)
- My CSS wish list - Manuel Matuzović (2023)
- CSS Wish List 2023 – Eric
- CSS Wishlist 2023
- The Stack: Every Layout
- On Container Queries, Responsive Images, and JPEG-XL (2023) (HN)
- unpic/placeholder - Pure-CSS image placeholders.
- Scrollbar - Web app which helps developers to design and implement custom scrollbars. (Code)
- Cassius - Formalization of CSS, making it possible to build tools that reason about the appearance of web pages.
- Ten tips for better CSS transitions and animations (2023)
- CSS System Colors (2021) (HN)
- Stylelint Plugin Defensive CSS
- Trigonometric Functions in CSS (2023) (HN)
- CSS Masking (2023)
- You don't need JavaScript to support theming (2022)
- XISS - Experimental compiler for modular CSS written in Rust.
- What's a Basic Use Case for Cascade Layers in CSS? (2023)
- Spinning Diagrams with CSS (2023) (HN)
- CSS Textmate grammar for syntax highlighting
- css-color-converter - Converts CSS colors from one representation to another.
- CSS Tip: Learn CSS the easy one
- CSS Blend Modes (2023)
- How to make a CSS-only hamburger menu (2023) (Lobsters)
- Conditional CSS with:has and:nth-last-child (2023)
- What's new in CSS and UI: I/O 2023 Edition
- Mastering CSS Blend Modes (2023) (HN)
- Everything You Want To Know About Media Queries and Responsive Design (2023) (HN)
- CCS (Customized Constraint System) - Generic constraints representation system can simultaneously capture R1CS, Plonkish, and AIR.
- CSS Pro - Re-imagined Devtools for web design. (HN)
- CSS Nesting (2023)
- Modern CSS in Real Life (2023)
- UnoCSS Transformer Alias - Transform alias for UnoCSS shortcuts.
- PureCSS Showcase by Asyraf Hussin
- Rebuilding a comment component with modern CSS (2023)
- Modern CSS for Dynamic Component-Based Architecture (2023) (HN)
- The Staggering Frontiers of CSS (2023) (HN)
- Smooth shadow generator (HN)
- Introduction to Defensive CSS (2022) (HN)
- The New CSS (2023)
- Frosted Glass
- Fit-to-Width Text (2023)
- Cyclic Dependency Space Toggles (2023)
- CSS Database Queries (2023)
- Future CSS: State Container Queries (2023) (HN)
- CSS: The Good Parts (2023) (Tweet)
- Solved: Tricky Floating Image Alignment (2023)
- CSS Findings From The Threads App (2023) (HN)
- Writing CSS In 2023: Is It Any Different Than A Few Years Ago? (2023)
- New Viewport Units (2023)
- Styling Flowcharts Using CSS (2023) (HN)
- Re-creating a Japanese Fireworks Catalog from 1883 in CSS (2023)
- CSS And Accessibility: Inclusion Through User Choice (2023)
- Randomness in CSS using trigonometry (2023)
- hdx - High performance tools for CSS, written in Rust.
- CSS transitions demo
- CSS Selectors: A Visual Guide & Reference (HN)
- Сверстать Блюскай (2023)
- The ideal viewport doesn't exist (HN)
- View Transitions Break Incremental Rendering (2023)
- Four new CSS features for smooth entry and exit animations (2023)
- Modern Button Styles - 45 CSS Only Buttons