Modern CSS / Next-Gen CSS

Component-based CSS

• Utility Class / Functional CSS / Utility-first CSS / Atomic CSS
  • The Case for Atomic / Utility-First CSS
    • CSS Utility Classes and "Separation of Concerns"
  • A Year of Utility Classes
  • So you need a CSS utility library?
  • see UI Toolkits
• CSS Modules
  • The End of Global CSS
  • Tools - see Tooling > Toolchain > Builder / Bundler > Webpack
• Styled-Components / Emotion
  • CSS in JS
    • A Unified Styling Language
    • A Brief History of CSS-in-JS: How We Got Here and Where We’re Going, The State of CSS
    • Comparison of CSS-in-JS solutions
  • Styled Components: Enforcing Best Practices In Component-Based Systems
  • Writing your styles in JS ≠ writing inline styles
  • Libraries
    • styled-system, system-components, grid-styled
    • styled-normalize / styled-sanitize
    • styled-components-breakpoint
    • styled-tools

Preprocessor-based CSS

• PostCSS
  • Intro
    • Meet PostCSS
    • PostCSS – A Comprehensive Introduction
    • PostCSS – Sass Killer or Preprocessing Pretender?
    • PostCSS Playground
  • Preset Env
    • It’s Time To Start Using CSS Custom Properties
    • Getting Started With CSS calc()
  • More Plugins - see Tooling > Toolchain > Compiler / Transpiler / Preprocessor > PostCSS

Best Practices

• Sanitize.css / Normalize.css / Reset.css
• Methodology
  • BEM
    • BEM 101 / MindBEMding
  • OOCSS
    • An Introduction To Object Oriented CSS (OOCSS)
  • SMACSS
  • ITCSS, RSCSS, SOLID CSS
  • CSS Guidelines, MaintainableCSS
• Code Style
  • Idiomatic CSS
  • Airbnb CSS / Sass Styleguide
  • Airbnb CSS-in-JavaScript Style Guide
  • CSS + HTML
    • Isobar Front-end Code Standards
    • Code Guide by @mdo

Know More about Web Design / UI Design / UX Design

• Responsive/Adaptive Web Design
  • Responsive Web Design Basics /\ Responsive Web Design: What It Is And How To Use It
  • The Difference Between Responsive and Adaptive Design
  • The Current State of Adaptive Design
  • Responsivedesign.is - Design, Develop
  • Patterns
    • Responsive Web Design Patterns, \ Responsive Patterns, \ ResponsiveDesign.is Patterns
    • Responsive Data Table Roundup
• Motion Design
  • Creating Usability with Motion: The UX in Motion Manifesto
  • 10 principles for smooth web animations
• Grid System - A Comprehensive Introduction to Grids in Web Design
  • calc() grid system - Lost Grid
  • flexbox grid system - Flexbox Grid
  • The 8-Point Grid
• Typography
  • Typography.js
  • Gutenberg
  • The Equilateral Triangle of a Perfect Paragraph
  • The Elements of Typographic Style Applied to the Web
  • Why is Vertical Rhythm an Important Typography Practice?
    • CSS with vertical rhythm
  • More Meaningful Typography
    • Modular Scale
• Atomic Design (Book)
  • The Atomic Workflow — People, Process, And Making Design Systems Happen
  • The “Other” Interface: Atomic Design With Sass
  • Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass)
• Design System
  • A comprehensive guide to design systems, Design Systems Handbook
  • Design Tokens
    • Tokens in Design Systems
    • How to manage your Design Tokens with Style Dictionary
    • What Are Design Tokens?
  • Style Guide
    • Style Guide Driven Development / Living Style Guides
    • Tools - see Tooling > Documentation > Style Guide
    • Examples
      • Apple's Human Interface Guidelines
      • Google's Material Design
      • Microsoft's Fluent Design System
      • Airbnb's new design system
      • Github's Primer
      • Atlassian's Design Guidelines
      • Salesforce's Lightning Design System
      • Yelp's Styleguide
      • IBM's Living Language
      • BBC's GEL Guidelines
      • A List Apart's pattern library
      • USA.gov's [Web Design Standards](https://standards.usa.gov/)
      • MailChimp's Email Design Guide