CSS
Notes
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.
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 containersnever use absolute widths (px, in, cm, etc.) for anything
body tag takes up the whole width and height of the browser screen.
Links
CSS Blocks - High performance, maintainable stylesheets.
Opticss - CSS Optimizer.
Min - World's smallest (995 bytes) CSS framework.
Emotion - Performant and flexible CSS-in-JS library.
astroturf - An "artificial" css-in-js for those that want it all.
Spectre - Lightweight, Responsive and Modern CSS Framework.
Tachyons - Functional CSS for humans.
CSStype - Strict TypeScript and Flow types for style based on MDN data.
normalize.css - Modern alternative to CSS resets.
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.
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.
CSS Scan Chrome Extension - Instantly inspect and copy computed CSS.
DropCSS - Simple, thorough and fast unused-CSS cleaner.
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.
CSSFX - Beautifully simple click-to-copy CSS effects.
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.
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.
Pure CSS Drawing Essentials - Top 5 CSS properties I rely on to produce Pure CSS art.
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.
CSShake - CSS classes to move your DOM.
JSS - Authoring tool for CSS which uses JavaScript as a host language.
CSS Scroll Shadows - Adjust the controls and see the CSS scroll shadows change. (Code)
Tint & Shade Generator - Display tints and shades of a given hex color in 10% increments.
The CSS Cascade - How browsers resolve competing CSS styles.
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)
MoreToggles.css - Pure CSS library that provides you with a variety of nice-looking toggles. (Code)
postcss-trash-killer - Postcss plugin which wil be remove all unused css.
CSS Doodle - Web component for drawing patterns with CSS. (Code)
Sakura - Minimal classless css framework / theme.
Sakura Bookmarklet - Enable Sakura.css on any website.
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)
Last updated