- 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.
- Code guide by @mdo
- CSS Reference
- CSS Blocks - High performance, maintainable stylesheets.
- Opticss - CSS Optimizer.
- CSS Puns
- Magic of CSS
- 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.
- 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)
- CSS Scan Chrome Extension - Instantly inspect and copy computed CSS.
- 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.
- 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.
- CSS Working Group Editor Drafts
- 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 - Comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
- 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)
- 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)