CSS Notes

CSS props as classes. So instead of actually writing any CSS, you just apply the utility classes in HTML for each of the CSS rules to avoid mental jumping.

codeAdrian/clay.css: Easily add claymorphic styles to any HTML element with this micro class and SASS mixin. customize with CSS variables

Carbon Design System

Carbon Design System Framework neutral components

Open UI

Home | Open UI Framework neutral components
The selectmenu HTML Tag | CSS-Tricks - CSS-Tricks

MUI

MUI-最接近原生 APP 体验的高性能前端框架

Pico.css

Pico.css • Minimal CSS Framework for semantic HTML

TACHYONS

functional/atomic CSS, shorter class names

TACHYONS - Css Toolkit
TACHYONS - Definition Lists | Simple
tachyons-css/tachyons-verbose: Functional CSS for humans. Verbose edition.

SASS/SCSS

Sass: Syntactically Awesome Style Sheets
Sass: Syntax
SCSS: Syntax

Sass: sass:color

SassMeister | The Sass Playground!
The Sass Way
Difference between .sass and .scss | Responsive Web Design

Sass - Free tutorial to learn HTML and CSS
Learn the Best and Most Useful SCSS from @Pickra5000 on @eggheadio

Sass Style Guide | CSS-Tricks

Sass: Mixin or Placeholder? - SitePoint
When to use @extend; when to use a mixin – CSS Wizardry – Web Performance Optimisation

`@mixin`

Sass: @mixin and @include

// _mixins.scss
@mixin center($max-width) {
  max-width: $max-width;
  width: 100%;
  margin: 0 auto;
}

// main.scss
.container {
  @include center(1170px);
}

`@extend`

Sass: @extend

// placeholder, intended to be `@extend`
%rainbow {
  rainbow: true;
}

.selector {
  @extend %rainbow;
  unicorn: true;
}

What Nobody Told You About Sass's @extend - SitePoint
Why You Should Avoid Sass @extend - SitePoint

@extend adds current class to another existing class (creating alias)
don't handle selector and media query well

Styling Modern Webapps

What to use for React styling? ❗!important, overview of pipeline
Styling In Modern Web Apps — Smashing Magazine
8 Ways to Style React Components Compared — SitePoint ❗!important
5 Ways to Style React Components in 2020 | by Jonathan Saring | Bits and Pieces

The State of CSS 2019

CSS is Alive and Well

The Debate Around "Do We Even Need CSS Anymore?" | CSS-Tricks
The CSS Holy War & How To Think Beyond Dogma – gitconnected

CSS in JS
- Inline CSS
- Styled Components
- Aphrodite
Pure CSS/Preprocessors/Postprocessors
- Pure CSS
- Sass & SCSS
- Less
- Stylable
- CSS Blocks
- PostCSS
  - CSS Modules
  - Preset env

The Power of CSS Processors in Web Applications Development - Codica
Styling React Components in Sass | Hugo Giraudel, web developer in Berlin 2015
The CSS-in-React Landscape | CSS-Tricks

CSS in JS would incur overhead at runtime when compiling the JS object to CSS and on the HOC wrapping your components. But bundling CSS in JS is a boon for standalone components. Since CSS in JS is a DSL (mimiking CSS) on there own, they may not support all CSS features.
Preprocessor/Postprocessor solutions make use of the compile pipeline and output pure CSS for you to import in your components. PostCSS is built-in to create-react-app (with opt-in CSS Modules, SASS, Less support).
They allows you to use new next generation features in your CSS and transpile to the version that the current browsers supports (much like Babel).
CSS Modules creates BEM class names for you to use. Better use with classnames or obj-str. However I find nesting in SCSS is enough to cater most styling list, beware of style leaking into decedents though.

css-pipeline

CSS in JS

CSS-in-JS Roundup: Styling React Components ← Alligator.io ❗!important
9 CSS in JS Libraries you should Know in 2018 – Bits and Pieces
Styling Best Practices using React – The Non-Traditional Developer – Medium
Everything you need to know about CSS in JS. #reactjs #cssinjs - YouTube

David Wells: Bulletproof CSS in React - YouTube compares different styles, favor PostCSS
Bulletproof CSS in React - Speaker Deck

CSS-in-JS React: CSS in JS techniques comparison
MicheleBertoli/css-in-js: React: CSS in JS techniques comparison
Vjeux » React: CSS in JS – NationJS ❗!important, 2014
React: CSS in JS - Speaker Deck embedded JS object

A Brief History of CSS-in-JS: How We Got Here and Where We’re Going
All You Need To Know About CSS-in-JS – Hacker Noon
State of React and CSS — KADIRA VOICE
CSS in JS in CSS
JavaScript Style Sheets by Oleg Slobodskoi
5 things you can do in CSS-in-JS that you didn’t know about
CSS in JS is like replacing a broken screwdriver with your favorite hammer.

[React] Add support for arrays with holes in style attribute by vjeux · Pull Request #2196 · facebook/react

CSS Architecture: First steps, by Thiago Victorino
CSS Architecture with ReactJS | Cheesecake Labs

Inline Styles (Object CSS):

const divStyle = {
  color: "white",
  background: "black",
};

const TextBox = () => <div style={divStyle}>This is Inline Styles.</div>;

export default TextBox;

CSS in JS:

import styled from "styled-components";

const Text = styled.div`
  color: white,
  background: black
`;

const TextBox = () => <Text>This is CSS-in-JS</Text>;

export default TextBox;

PostCSS

css-notes#PostCSS

Libraries

4. Four ways to style react components - codeburst
System UI

JSS CSSinJS GitHub org

JedWatson/classnames: A simple javascript utility for conditionally joining classNames together
lukeed/clsx: A tiny (228B) utility for constructing className strings conditionally.

styled-components OOCSS
styled-components/awesome-styled-components: A curated list of awesome styled-components resources 💅
styled-components/polished: A lightweight toolset for writing styles in JavaScript ✨
The magic behind 💅 styled-components - Max Stoibers Blog
Announcing 💅 styled-components v2: A smaller, faster drop-in upgrade with even more features
Styled Components: The Essentials Explained in 3 Steps
Guide to Styled-Components — Write CSS Code for React
Building a React component library with styled-components: Input Field
Building a Reusable Component System with React.js and styled-components
Getting the Most Out of Styled Components (7 Must Know Features)
You’re missing a trick with your styled-components in React set displayName

Stitches Lightweight, SSR, Atomic CSS
Migrating from styled-components to Stitches — Stitches
Stitches: A modern, server-rendered CSS-in-JS library - LogRocket Blog

Styled System
Component Based Design System With Styled-System | Varun Vachhar

Home | Twind allows Tailwind-in-js
tw-in-js/twind-react: Twind react styled components inspired by stitches

ben-rogerson/twin.macro: 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

emotion - The Next Generation of CSS-in-JS inspired by styled-components
emotion-js/emotion: ⚡️ The Next Generation of CSS-in-JS

Stitches
modulz/stitches: The modern styling library.

rofrischmann/fela: State-Driven Styling in JavaScript
Read Me · Fela
fela/packages/react-fela at master · rofrischmann/fela
Styling Components with React Fela

zeit/styled-jsx: Full CSS support for JSX without compromises
ReactCSS
Radium - A React Component Styling Library
Khan/aphrodite: Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
streamich/freestyler: 5th generation CSS-in-JS library recommend nano-css
streamich/nano-css: Distilled CSS-in-JS for gourmet developers

React Blocks
jsxstyle/jsxstyle: Inline style system for React and Preact
rtsao/styletron: Universal, high-performance JavaScript styles no build chain needed
J2C — JavaScript to CSS Compiler

goober | A less than 1KB css-in-js solution.
cristianbote/goober: 🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API

Theme UI
system-ui/theme-ui: Build consistent, themeable React apps based on constraint-based design principles

Primer Design System GitHub

Styling React Components in Sass

XP.css - A design system for building faithful recreations of old UIs

CSS Modules

most CSS in JS solutions create localized style for component
Webpack's css-loader creates BEM-styled CSS automatically

css-modules/css-modules: Documentation about css-modules
CSS Blocks inspired by CSS Module

Movement to restrict CSS local to a component.
This is done by scoping the CSS (BEM-styled CSS, component_class_hash), usually the JavaScript code will import the CSS to assign generated classnames to elements.
Uses composition to reduce applying multiple classes to component (e.g. button-in-progress vs button-normal button-in-progress).

Create a file named <component>.module.css and import styles from './<component>.module.css';

CSS Modules Welcome to the Future - Glen Maddern: Internet Pro
Interoperable CSS A CSS standard for the Loader Age - Glen Maddern: Internet Pro
A deep dive into CSS Module - LogRocket Blog
CSS Modules by Example
Styling and Layout | Docusaurus
Understanding the CSS Modules Methodology - SitePoint
Do I really need CSS modules? - David Wells

What are CSS Modules and why do we need them? | CSS-Tricks
Getting Started with CSS Modules | CSS-Tricks
CSS Modules and React | CSS-Tricks

How to Pass Components as Props in React - DEV Community example

Selector

Selectors Level 4

CSS Diner - Where we feast on CSS Selectors!
CSS Selectors: The Full Reference Guide 🚀 - DEV Community

The Skinny on CSS Attribute Selectors | CSS-Tricks
How and why to use attribute selectors in CSS - LogRocket Blog

The 30 CSS Selectors You Must Memorize ❗!important
Selectors - Web developer guides | MDN

Specificity

CSS Specificity | Standardista
Selectors | CSS-Tricks
CSS Specificity: Things You Should Know – Smashing Magazine
Level up your CSS selector skills – LogRocket
The dangers of nesting abuse in CSS compilers
Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade - Vanseo Design
CSS Specificity Wars | Stuff & Nonsense blog

Webstock ‘11: Nicole Sullivan - CSS Tools for Massive Websites on Vimeo blog specificity
Abstract look and feel as class, add class to element as mixins

Pseudo-Classes

note: :is() assume the highest specificity of its arguments
note: :where() has 0 specificity, useful for customizing style afterwards

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine
Who Knew Pseudo Elements Were So Great! - DEV Community 👩‍💻👨‍💻

CSS Pseudo-classes: Links
CSS Pseudo-classes: Forms
CSS Pseudo-classes: Element states
CSS Pseudo-classes: Other states

The new CSS pseudo-classes explained - :is() :where() :has() - YouTube

:where :is CSS? - DEV Community 👩‍💻👨‍💻
::marker - CSS: Cascading Style Sheets | MDN customize <ul> bullet
Use Unicode characters for bullet points in CSS using ::marker - DEV Community

Cool uses of the ::before and ::after pseudoelements
Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

CSS - The power of :has() - YouTube

::path and ::theme

::part and ::theme, an ::explainer | CSS-Tricks
::part and ::theme, an ::explainer – Monica Dinculescu

::part() - CSS: Cascading Style Sheets | MDN

XPath

An Introduction to XPath: How to Get Started – The Scrapinghub Blog
XPath Tips from the Web Scraping Trenches – The Scrapinghub Blog
An SEO's guide to XPath - Builtvisible
A very brief primer to thinking in XPath // plasmasturm.org
Using XPath to select elements – ParseHub Help Center
Introduction to web scraping: Selecting content on a web page with XPath
The lxml.etree Tutorial

// `＄x` is XPath query, available in dev console
$x("//div[@class='con-box'][contains(., 'EPH Reader')]");

Xpath cheatsheet
XPath 1.0 Tutorial @ZVON.org
XPath for web scraping
Best Online XPath Tester and Evaluator

For publishing/printing

Printing - Developer guides | MDN
CSS At-Rules
How to Create Printer-friendly Pages with CSS — SitePoint
A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine
How to print your HTML with style
print stylesheet Archives | CSS-Tricks

print-css.rocks - PrintCSS CSS Paged Media tutorial and information
zopyx/print-css-rocks: CSS Paged Media tutorial and review of tools (repository for print-css.rocks)

Prince - Documentation formatting HTML
Designing For Print With CSS — Smashing Magazine
rachelandrew/css-for-print

Positioning

CSS static and relative positioning - W3C Wiki
CSS absolute and fixed positioning - W3C Wiki

Learn CSS Positioning Quickly With A Real World Example - YouTube

Advanced Positioning Tutorial | HTML & CSS Is Hard
CSS Positioning Explained By Building An Ice Cream Sundae
static, relative, absolute, fixed, sticky - Understanding the difference - Dillion's Blog
How Well Do You Understand CSS Positioning? - Vanseo Design
CSS: Absolutely positioning things relatively | by Canva Engineering | May, 2022 | Canva Engineering Blog

5 Things You Might Not Know About the CSS Positioning Types | Scotch

/_ Position Is Everything _/ — Modern browser bugs explained in detail!

Sticky Position

CSS Position Sticky - How It Really Works! - Elad Shechter - Medium
CSS Tip: Fixed Headers and Section Anchors | Caktus Group fixed header + sticky header

Set z-index and background color of sticky/fixed headers

Overlay

The overlay should be a absolute position in a relative container, together with the background item.

<div id="container" style={{ position: "relative" }}>
  <div id="background"></div>
  <div
    id="overlay"
    style={{ position: "absolute", bottom: "8px", right: "8px" }}
  ></div>
</div>

Units

CSS Ruler • Explore CSS lengths.
Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium
Using CSS viewport units (vw, vh ...) for font sizes can be tricky - DEV Community 👩‍💻👨‍💻
What is the CSS ‘ch’ Unit? – Eric’s Archived Thoughts
Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨
Investigating the new CSS viewport-relative units - LogRocket Blog Vi, Vb

Logical Properties based on text rather than space, handles rlt and vertical layouts seamlessly
Late to Logical | CSS-Tricks - CSS-Tricks
Logical properties

Container Units Should Be Pretty Handy | CSS-Tricks

Color

color

the new code – Color in CSS
the new code – CSS alpha decent color preview
the new code – What's The Difference Between opacity and rgba?

HSL() / HSLa() is great for programmatic color control | CSS-Tricks
Unlocking Colors
Colors in CSS - Ahmad Shadeed
Color Formats in CSS - hex, rgb, hsl, lab

A Preview of 4 New CSS Color Features | CSS-Tricks - CSS-Tricks

gradient-designer

Image

How to Show Images on Click | CSS-Tricks

html - How do I auto-resize an image to fit a 'div' container? - Stack Overflow
object-fit | CSS-Tricks
Cropping Images in CSS With object-fit ← Alligator.io
the new code – The Widescreen Web: Using CSS object-fit
CSS 小技 - 圖片水平垂直置中並依容器大小自動縮放-黑暗執行緒

Image Fitting
Preserve an Image's Aspect Ratio When Resized | kirupa.com
Cropping & Scaling Images Using SVG Documents – Sara Soueidan, inclusive design engineer in case your don't want to use object-fit

First Look At The CSS object-view-box Property - Ahmad Shadeed
A guide to CSS object-view-box - LogRocket Blog

Media Queries

Media queries - CSS: Cascading Style Sheets | MDN
A Complete Guide to CSS Media Queries | CSS-Tricks - CSS-Tricks
Media Queries in Responsive Design: A Complete Guide (2021)
New media queries you need to know - LogRocket Blog

CSS Container Queries

CSS Container Queries - CSS: Cascading Style Sheets | MDN
A Cornucopia of Container Queries | CSS-Tricks - CSS-Tricks
A Primer On CSS Container Queries — Smashing Magazine
A New Container Query Polyfill That Just Works | CSS-Tricks - CSS-Tricks
On container queries. — Ethan Marcotte
Say Hello To CSS Container Queries - Ahmad Shadeed
Container Queries: a Quick Start Guide | OddBird

cq units within @container

.container {
  container-type: inline-size;
  /* shorthand: name / type */
  container: my-container / inline-size;
}

@container (min-width: 60ch) {
  article {
    padding: 2rem;
    font-size: max(1.25rem, 1em + 2cqi);
  }
}

Layout

Laying Out the Future with Rachel Andrew | The Web Ahead
The Web Ahead Labs
CSS Layout News
Layout Land - YouTube

Flow (default)
Position
- Relative (default， applicable in other layout mode)
- Absolute
- Fixed
- Sticky
Flexbox
Grid

/* https://www.youtube.com/watch?v=SGlpOnIgk1w */
.container {
  width: min(100%-2rem, 960px);
  margin-inline: auto;
}

Learn CSS Layout
display | CSS-Tricks
Understanding Layout Algorithms ❗!important

4 CSS layouts without using media queries | Polypane Browser for Developers
Optimizing for Large-Scale Displays | CSS-Tricks
Responsive Layouts, Fewer Media Queries | CSS-Tricks
Modern Layouts: Getting Out Of Our Ruts | Jen Simmons
Progressing Our Layouts | Jen Simmons
Responsive Layouts Beyond the Sidebar | Jen Simmons

Design & Content Layout Workshop // Speaker Deck
Designing Layouts: The New Superpowers of CSS at An Event Apart San Francisco // Speaker Deck
Revolutionize Your Page (40min, Fall 2016) // Speaker Deck
Modern Layouts: Getting Out of Our Ruts // Speaker Deck

Build a Responsive, Modern Dashboard Layout With CSS Grid and Flexbox
Solving All CSS Layout Issues — any screen, any root font size, without JS | by Joana Borges Late | Mar, 2023 | Level Up Coding

Layout Land - YouTube
Don’t Use My Grid System (or any others) - Miriam Suzanne - btconfDUS2018 on Vimeo

Methods for Equal Height Columns by Craig Fox on CodePen

Margin

Margin considered harmful margin modifies layout outside the componet, breaking encapsulation
The Horror Of Margins In CSS - YouTube use spacer element (with padding)
The Rules of Margin Collapse
Adjacent margin collapse; adjacent padding don't.

Viewport

A tale of two viewports — part one
A tale of two viewports — part two

Viewport units: vw, vh, vmin, vmax - Web Design Weekly

Responsive IFrame

Embeds · Bootstrap
Responsive IFRAMEs — The Right Way (CSS Only)! | Ben Marshall
Responsive iFrames
Responsive Iframes with One Great CSS Trick | Theodo

CSS Layout Generator with Flexbox or Grid

javascript - Embedding youtube video "Refused to display document because display forbidden by X-Frame-Options" - Stack Overflow use /embed/id URL

Gist: use padding to squeeze the available space in the container to the aspect ratio and use 100% fill for the iframe.

/* 16x9 Aspect Ratio */
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

Flexbox or CSS Grid

Flexbox is for alignment. CSSGrid is for layout.

Quick! What's the Difference Between Flexbox and Grid? | CSS-Tricks
Flexbox or CSS Grid? How to Make the Right Layout Decision - SitePoint
Grid for layout, Flexbox for components - Ahmad Shadeed
CSS Flexbox vs. CSS Grid

Responsive Grid and Flexbox Page Layout Tutorial (Part 1 of 2: HTML) - YouTube
Responsive Grid and Flexbox Page Layout Tutorial (Part 2 of 2: CSS) - YouTube

Grid with flexbox - JSFiddle
Grid with grid - JSFiddle
Gridlex - Just a Flexbox Grid System
shadeed/grid-to-flex: Easily create Flexbox fallback for your CSS Grid!

Flexbox

There is an old syntax (display: box) that old Android and Firefox supports.
IE10 implemented the 2012 spec (display: -ms-flexbox). The spec then undergone major rewrite.
Modern browsers support the current spec (display: flex).

The Best Flexbox Resources | Wes Bos
What The Flexbox?! - YouTube video series by Web Bos
Flexbox: WTF - Forward 4 Web Summit - YouTube slide 2016 RC spec, ❗!important
Free Flexbox and CSS Grid Workshop - YouTube
An Interactive Guide to Flexbox in CSS

A Complete Guide to Flexbox | CSS-Tricks ❗!important
Understanding flex-grow, flex-shrink, and flex-basis | CSS-Tricks
Balancing on a Pivot with Flexbox - CSS-Tricks

Flexbox Tutorial ❗!important
Flexbox Tutorial | HTML & CSS Is Hard
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
Understanding Flex Direction | Standardista

CSS Flexbox Ultimate Guide | Web Dev Simplified Blog
What The Flexbox?! — A simple 20 video course that will help you master CSS Flexbox ❗!important, by Wes Bos
11 things I learned reading the flexbox spec – Hacker Noon
12 CSS Flexbox tips & tricks which you need to know as a web developer - DEV Community 👩‍💻👨‍💻
Learn CSS Flexbox by Building 5 Responsive Layouts
Complete Introduction to CSS Flexbox 💪 - DEV Community
Learn flexbox the easy way - YouTube

Can I use... flexbox
philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them. ❗!important

Alignment:
justify-content: main-axis items
align-items: cross-axis items
align-content: wrapped flex lines
align-self: applied to the item itself

Yoga Layout | A cross-platform layout engine used by React Native

Flexbox Froggy - A game for learning CSS flexbox @important
Flexbox Defense
Flexbox Zombies | Mastery Games
Flexplorer

Flexbox Is As Easy As Pie: Designing CSS Layouts — Smashing Magazine
Harnessing Flexbox For Today's Web Apps — Smashing Magazine
Laying Out A Flexible Future For Web Design With Flexbox Best Practices — Smashing Magazine
The Flexbox Reading List: Techniques And Tools — Smashing Magazine
The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment — Smashing Magazine

Flexbox Patterns - Intro
Designing with FLEXBOX
Flexbox First
Flexbox in the Real World
sfioritto/real-world-flexbox: examples of different ways you can start using flexbox today
Better, Simpler Grid Systems — Solved by Flexbox — Cleaner, hack-free CSS

Don't use flexbox for overall page layout - JakeArchibald.com use it for page contents
When to use Flexbox and when to use CSS grid - LogRocket Blog
Responsive Design of the Future with Flexbox
Time for Flexbox First | Caktus Group
Experiment: Using Flexbox Today - Chris Wright
Chris Wright - Experiment: Flexbox Adventures
Flexbox @ Work - Coursera Technology
Learning Flexbox - Sarah Parmenter - User Interface Designer
弹性盒模型指南 | bubkoo

The Ultimate Flexbox Cheat Sheet
Flexbox Cheatsheet Cheatsheet
Flexbox Cheatsheet
Flexy Boxes — CSS flexbox playground and code generation tool

Libraries

#Bulma
#Tailwind CSS

React Blocks

simple-flex

kristoferjoseph/flexboxgrid: Grid based on CSS3 flexbox
roylee0704/react-flexbox-grid: A set of React components implementing flexboxgrid with the power of CSS Modules.

Yoga

Yoga Layout | A cross-platform layout engine
facebook/yoga: Yoga is a cross-platform layout engine which implements Flexbox.

Grid

Grid layout can be implemented with display:grid or Flexbox
Theo encountered grid's compatibility issues (in particular SVG scaling) across browsers

IE 10 and 11 support a outdated Grid syntax.

CSS grid: release 2.0 | Webflow Blog

grid-template-columns - CSS: Cascading Style Sheets | MDN
grid-template-areas - CSS: Cascading Style Sheets | MDN ❗!important, define layout with name
grid-template | CSS-Tricks - CSS-Tricks

Responsive layout without media query:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.card {
  display: block;
  background: #aaa;
  padding: 1rem;
}

.card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.card:not(:has(img))::before {
  /* image placeholder */
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  background-color: #0ff;
}

.card:empty {
  display: none;
}

A Complete Guide to Grid | CSS-Tricks ❗!important
What We Want from Grid | CSS-Tricks - CSS-Tricks SVG scaling issue in comments
Simple Named Grid Areas - CSS-Tricks ❗!important
Grid Layout Ah-ha Moment - Ahmad Shadeed ❗!important
CSS Grid Handbook – Complete Guide to Grid Containers and Grid Items
CSS Grid Template Areas In Action - Ahmad Shadeed codepen
How to Use CSS Grid Layout – Grid Properties Explained with Examples
Learn CSS Grid the easy way - YouTube

Building Production-Ready CSS Grid Layouts Today — Smashing Magazine
Understanding CSS Grid: Creating A Grid Container — Smashing Magazine

Grid Garden - A game for learning CSS grid ❗!important
Grid Critters
CSS Grid Generator

CSS Grid for Beginners (Part 1 of 2) - YouTube
CSS Grid for Beginners (Part 2 of 2) - YouTube

Grid by Example
GRID: A simple visual cheatsheet for CSS Grid Layout
CSS Grid Cheatsheet + 2 Flexbox Courses for Free
CSS Grid Layout - CSS | MDN
Jen Simmons | Labs
CSS Grid Layout Interface Builder | LayoutIt!
Complete Introduction to CSS Grid 📊 - DEV Community
Masonry JavaScript grid layout library

Build a Responsive, Modern Dashboard Layout With CSS Grid and Flexbox
Redesigning a Website Using CSS Grid and Flexbox - DZone Web Dev
CSS Grid Layout vs CSS Frameworks: When To Use What - DZone Web Dev

The future of layout with CSS: Grid Layouts ★ Mozilla Hacks – the Web developer blog
An Introduction to CSS Grid Layout: Part 1 – Mozilla Hacks – the Web developer blog
An Introduction to CSS Grid Layout: Part 2 – Mozilla Hacks – the Web developer blog
The future of layout with CSS: Grid Layouts — Medium
11 Things I Learned Reading the CSS Grid Specification
CSS Grid Level 2: Here Comes Subgrid — Smashing Magazine

How CSS Grid Changes Everything // Speaker Deck
Designing with Grid — An Event Apart Denver // Speaker Deck
Building a Damn Simple Calendar Layout with CSS Grid, Moment, and Vue
Expandable Sections Within a CSS Grid | CSS-Tricks

Using CSS Grid the right way | hey it's violet
Learn CSS Grid in 5 minutes - A tutorial for beginners
CSS Grid tutorial: Learn to prototype websites quickly with CSS Grid
Learn CSS Grid for FREE in this interactive 14-part tutorial
Why CSS Grid is better than Bootstrap for creating layouts

Teaching CSS grid to newcomers
How I design with CSS grid
Notes on vertical writing and CSS grid

Zen Grids: a responsive grid system built with Compass and Sass

Flexbox Grid
Susy: Your Layout, Our Math | OddBird

GRID LAYOUT - a Collection by Gabi on CodePen
CodePen - Pure CSS crossword - CSS Grid

A simple, responsive, and tiny CSS grid for humans - Pills

Table

A Complete Guide to the Table Element | CSS-Tricks
table-layout | CSS-Tricks

A Responsive Accessible Table — Adrian Roselli
How to create a responsive HTML table - YouTube

Float

while float still works, do consider using flexbox

All About Floats | CSS-Tricks
A new micro clearfix hack – Nicolas Gallagher
CSS Floats 101 · An A List Apart Article

Shape

Changing the Shapes with Sara Soueidan | The Web Ahead flow text in arbitrary shape, not only rectangle

Alignment

What is Vertical Align? | CSS-Tricks

🎯CSS Flexbox Center Anything Vertically & Horizontally (Tutorial) alignment using flexbox is much easier
A Comprehensive Guide to Flexbox Alignment
Aligning Items in a Flex Container - CSS: Cascading Style Sheets | MDN
How to Center the Content Vertically and Horizontally with Flexbox
How to Center an Absolute Positioned Element Vertically and Horizontally with CSS

HTML Center Image – CSS Align Img Center Example

<div style="display:flex; justify-content:center; align-items:center;">
  <div>Centered element</div>
</div>

How to Center in CSS
Centering in CSS: A Complete Guide | CSS-Tricks
Faking 'float: center' with Pseudo Elements | CSS-Tricks
How To Center Anything With CSS
Absolute Horizontal And Vertical Centering In CSS – Smashing Magazine
Understanding vertical-align, or "How (Not) To Vertically Center Content"
6 Methods For Vertical Centering With CSS - Vanseo Design

Z-Index

The stacking context - CSS | MDN
CSS Painting Order | Woohoo also on stacking context
Z-Index Is Weird by Lemon on CodePen
How the z-index Property Works Under the Hood
What No One Told You About Z-Index — Philip Walton
Learn Z-Index Using a Visualization Tool

Border

Setting CSS3 Border-Radius with Slash Syntax
8 Fantastic Pure CSS Border Effect Code Snippets
Create beautiful boxes using the outline CSS property
Conditional Border Radius In CSS - Ahmad Shadeed

Shadow

Getting Deep Into Shadows | CSS-Tricks
Creating UI shadows that don’t suck - NYC Design - Medium

Box Shadow CSS Generator | CSSmatic
Smooth Shadow

CSS Shadow Palette Generator
Introducing “Shadow Palette Generator”, a tool to help you generate CSS box-shadow values

Box shadow vs. drop shadow in CSS - DEV Community drop-shadow around boarder of content in transparent PNG

Background

Every CSS Background Property Illustrated and Explained with Code Examples 🎖️

Button

CSS Social Card Hover Effect Animation - csspoints.com
Social Icon on hover 3d CSS Effects - csspoints.com

Hover.css - A collection of CSS3 powered hover effects

Text/Font

The Typekit Blog | Flexible typography with CSS locks
A Modern Typographic Scale ◆ 24 ways
Fluid Typography | CSS-Tricks
use responsive font size (vw/vh) on small screen, use fixed font size on large screen
Modern Fluid Typography Using CSS Clamp — Smashing Magazine
Fluid Typography with CSS Clamp() is My New Favorite Thing | by Daniel Yuschick | Level Up Coding
How Do You Do max-font-size in CSS? | CSS-Tricks with max()/min()/clamp() CSS function
How I'm Dealing With Font Sizes - Geoff Graham
Fluid Typography, Simplified
Fluid Typography with CSS & SASS
Why should type be fluid, anyway? by Elise Hein

Writing Modes at CSS Day // Speaker Deck text direction

CSS font-size-adjust: How to auto-adjust your font size - LogRocket Blog match multiple fonts' size

Display typography: text and image, overlays and fills | Responsive Web Typography

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

Implementing system fonts on Booking.com — A lesson learned. | by Stuart Frisby | Booking.com UX
System Font Stack | CSS-Tricks

font-display: swap; prevents flash of invisible text (FOIT)
font-display | CSS-Tricks
Ensure text remains visible during webfont load

font-feature-settings | CSS-Tricks use font variants

小 tips: 純 CSS 實現打字動畫效果_張鑫旭 - MdEditor
Typewriter Effect with CSS - DEV Community
Typewriter Animation That Handles Anything You Throw at It | CSS-Tricks

Fitting Text/Responsive Typography

Creating true fluid web typography to improve our processes — Pixelgrade
Fluid Responsive Typography With CSS Poly Fluid Sizing — Smashing Magazine
Fluid Typography | CSS-Tricks
Fluid Typography, Simplified

Fitting Text to a Container | CSS-Tricks
Auto-sizing text to fit container - CSS - WICG
css - Font scaling based on width of container - Stack Overflow
How I'm Dealing With Font Sizes | Geoff Graham

FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width. | Simple Focus
FitText - A plugin for inflating web type jQuery plugin
adactio/FitText.js: Modified version of FitText.js jQuery plugin. Now it works standalone. standalone
peacechen/FitText-UMD: FitText.js standalone library supporting UMD standalone

Truncation

Flexbox and Truncated Text | CSS-Tricks

Responsive text truncation with CSS - DEV Community 👩‍💻👨‍💻

Cursor

cursor | CSS-Tricks
CSS2 - Cursor styles
CodePen - Custom cursors using data-uri

Filters

filter - CSS | MDN
CSS Filters Demo
CSS Filters
filter | CSS-Tricks
SVG within CSS | CSS-Tricks

Masking

Masking in the Browser with CSS and SVG

Variable

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN
What is the difference between CSS variables and preprocessor variables? | CSS-Tricks
Everything you need to know about CSS Variables
How to Create a Themes Engine Using CSS Variables and React Context
Using css variables to create smooth animations - DEV Community 👩‍💻👨‍💻

CSS [Variable] Secrets - YouTube

Style Guide

Draft U.S. Web Design Standards | Draft U.S. Web Design Standards
CSS Guidelines (2.2.4) – High-level advice and guidelines for writing sane, manageable, scalable CSS
bevacqua/css

rstacruz/rscss CSS structure with CSS
Sass Guidelines

CSS Utility Classes and "Separation of Concerns"

Scrolling

Prevent Body Scrolling when scrolling a dialog
Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent Containers From Within Overflow Containers
Overflow Issues In CSS — Smashing Magazine

Need to scroll to the top of the page? | CSS-Tricks

Smooth Scrolling | CSS-Tricks

Scroll-driven Animations

CSS scroll-driven animations - CSS: Cascading Style Sheets | MDN
Animate elements on scroll with Scroll-driven animations - Chrome for Developers

Scroll-driven Animations ❗!important
CSS-Only Scroll-Driven Animation and Other Impossible Things - YouTube
Subtle, yet Beautiful Scroll Animations - YouTube

Intersection Observer API - Web APIs | MDN
Scroll Events and Intersection Observer - Beginner JavaScript - Wes Bos
martinlaxenaire/scroll-observer: Really simple Intersection Observer helper

@scroll-timeline - CSS: Cascading Style Sheets | MDN
Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines | CSS-Tricks - CSS-Tricks
flackr/scroll-timeline: A polyfill of ScrollTimeline.

Tips and Tricks

12 Little-Known CSS Facts
12 Little-Known CSS Facts (The Sequel)
Dirty Tricks From The Dark Corners Of Front-End // Speaker Deck
53 CSS-Techniques You Couldn't Live Without — Smashing Magazine
12 CSS tips and tricks - Duomly Blog - Programming courses online
3 underused CSS features to learn for 2020 - DEV Community 👩‍💻👨‍💻
6 CSS snippets every front-end developer should know in 2023

Good and Bad CSS Practices for Beginners
You should avoid these 7 CSS No-Gos! ☝️ - DEV Community 👩‍💻👨‍💻

css examples

A CSS Approach to Trap Focus Inside of an Element | CSS-Tricks

Custom, accessible radio/checkbox buttons with perfect alignment | CodyHouse
Building a Magical 3D button with HTML and CSS

Smart CSS Solutions For Common UI Challenges — Smashing Magazine
Magic Numbers in CSS | CSS-Tricks
Fighting the Space Between Inline Block Elements | CSS-Tricks
Bringing Spacer GIFs Back, to handle spacing elements in React and CSS
How CSS Spacing Works – A Guide for Web Developers

Newer Things to Know About Good Ol’ HTML Lists | CSS-Tricks - CSS-Tricks list-style-position: inside;

Yet Another 5 Must Know CSS Tricks That Almost Nobody Knows - YouTube

clamp()
sub-grid
@support
scroll snapping
logical property

You Don't Need JavaScript for That!
propjockey/css-sweeper: MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)

Building a coordinate system in CSS and HTML - DEV Community

Live CSS editor

<style style="display: block" contenteditable>
  html {
    background: blue;
  }
</style>

CSS Notes

Trend

How CSS Works

Caching with ServiceWorker

CSS Houdini

Normalization

Reset

Frameworks

OOCSS

BEM

Functional CSS/Atomic CSS

Material

Panda CSS

Milligram

Carbon Design System

Open UI

MUI

Pico.css

TACHYONS

Archives

~~~Windi~~~

SASS/SCSS

@mixin

@extend

Styling Modern Webapps

CSS in JS

PostCSS

Libraries

CSS Modules

Selector

Specificity

Pseudo-Classes

::path and ::theme

XPath

For publishing/printing

Positioning

Sticky Position

Overlay

Units

Color

Image

Media Queries

CSS Container Queries

Layout

Margin

Viewport

Responsive IFrame

Flexbox or CSS Grid

Flexbox

Libraries

Yoga

Grid

Table

Float

Shape

Alignment

Z-Index

Border

Shadow

Background

Button

Text/Font

Fitting Text/Responsive Typography

Truncation

Cursor

Filters

Masking

Variable

Style Guide

Scrolling

Scroll-driven Animations

Tips and Tricks

Live CSS editor

~Windi~

`@mixin`

`@extend`