General Resources
- You Don’t Need JavaScript – Stars: 13.9k – Last Updated: 11/2019 – Last Checked: 12/2020.
- CSS Animation 101 – Stars: 4.1k – Last Updated: 12/2020 – Last Checked: 12/2020.
- Magic of CSS Course – Stars: 3.5k – Last Updated: 7/2019 – Last Checked: 12/2020.
- Awesome CSS Frameworks – Stars: 3.4k – Last Updated: 10/2020 – Last Checked: 12/2020.
Basics
- Chris Coyier. CSS Basics: The Syntax That Matters & The Syntax That Doesn’t. css-tricks, 2019.
- Rachel Andrew. How to Learn CSS. smashing magazine, 1/2019.
- Peter Jang. Modern CSS Explained for Dinosaurs. Actualize, 2018.
- Excellent article that covers the evolution of CSS over the past 20+ years…for those of us who have been doing this for a while.
- Jeffrey Way, Devon Govett, et al. CSS3 Mastery. tuts+, 2010-2020.
- A number of the articles in this series are quite old, I’ll only list some of the more recent ones below.
- Jeffrey Way. The 30 CSS Selectors You Must Memorize. 9/2020.
- Jeffrey Way. 10 CSS3 Properties You Need to Be Familiar With. 10/2020.
Layout
- Chris Coyier. Quick! What’s the Difference Between Flexbox and Grid? css-tricks, 2/2019.
- Knowing when to use Grid and Flexbox is a tricky problem, Chris breaks down how he sees each fitting into layout design and garners feedback from some of the major voices in the CSS ecosystem.
- MDN Web Docs. Introduction to CSS Layout. Mozilla.
- A living document that provides a fairly comprehensive overview of different methods for layout using CSS. Has links for each topic to articles that explore each method more extensively.
- Nick Schaferhoff. CSS for Beginners: The CSS Box Model and How to Use It Correctly. torque, 6/2018.
- Rachel Andrew. When and How To Use CSS Multi-Column Layout. smashing magazine, 1/2019.
- Brad Westfall. How Well Do You Know CSS Layout? css-tricks, 1/2019.
- Ahmad El-Alfy. Building Multi-Directional Layouts. css-tricks, 1/2020.
- Tiffany Brown. Managing the CSS Box Model. sitepoint, 4/2017.
- Chris Coyier. Centering a div That Maintains Aspect-Ratio When There’s Body Margin. css-tricks, 2/2020.
- Marko Ilic. Comparing Various Ways to Hide Things in CSS. css-tricks, 11/2020.
- Robin Rendle. Thinking in Behaviors, Not Screen Sizes. css-tricks, 4/2020.
CSS Grid
- See our dedicated page on CSS Grid.
Flexbox
- A Complete Guide to Flexbox. css-tricks, 4/14/2020.
- Flexbox Froggy.
- Interactive game that helps in learning Flexbox.
- Nick Schaferhoff. A CSS Flexibox Tutorial for Beginners – What It Is and How To Use It. torque, 2/27/2020.
- Beau Carnes. Flexbox – The Ultimate CSS Flex Cheatsheet (with animated diagrams!). freecodecamp, 10/11/2019.
- Tiffany Brown. Creating Flexible Layouts with Flexbox. sitepoint, 2018.
- Valentin Podkamennyi. Clean Application – Flexible Box Layout. gitconnected, 4/6/2020.
- Covers creating the “Holy Grail” layout using flexbox with relatively few lines of code.
Typography
- Taimur Abdaal. Typography for Developers. css-tricks, 9/10/2019.
- Matej Latin. The State of Fluid Web Typography. Better Web Type, 5/14/2019.
- Alex Bigman. Digital Fonts: A Condensed History. sitepoint, 2017.
- Chris Coyier. How Do You Do max-font-size in CSS? css-tricks, 1/2020.
- Giulio Mainardi. CSS font-display: The Future of Font Rendering on the Web. sitepoint, 9/2017.
- Caleb Williams. How to Tame Line Height in CSS. css-tricks, 7/2020.
- Chris Coyier. Simplified Fluid Typography. css-tricks, 5/2020.*
Responsive
- Mikolaj Dobrucki. Responsive Designs and CSS Custom Properties: Building a Flexible Grid System. css-tricks, 2/26/2019.
- Suzanne Scacca. Elements to Ditch or Repurpose on Mobile. smashing magazine, 2018.
- Philip Kiely. Turning a Fixed-Size Object into a Responsive Element. css-tricks, 5/2019.
- Baljot Saral. The Dos and Don’ts of Responsive Web Design. torque, 3/2019.
Media Queries
- Cem Eygi. CSS Media Queries: Breakpoints, Media Types, Standard Resolutions, and More. freecodecamp, 4/8/2020.
- 4 CSS Layouts Without Using Media Queries. Polypane, 1/2020.
- Chris Ward. Creating Media Queries for Responsive Web Designs. sitepoint, 2017.
- The Complete Guide to CSS Media Queries. polypane, 6/2020.
- A Complete Guide to CSS Media Queries. css-tricks, 10/2020.
- Sufyan bin Uzayr. Media Queries in Responsive Design. torque, 7/2015.
Methodologies
BEM
- Official Block Element Modifier (BEM) Site.
- BEM Cheat Sheet.
- Robin Rendle. BEM 101. css-tricks, 2016.
- Eugene Mikhushkin. BEM Should Not Exist. hackernoon, 1/4/2019.
- Argues that there is no need for BEM and that it actually causes further problems.
- Tiffany Brown. CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS. sitepoint, 2018.
- Provides brief overview of both BEM and Atomic methodologies.
- Tiffany Brown. CSS Architecture Block-Element-Modifier. sitepoint, 3/2017.
Utility First CSS
- In Defense of Utility-First CSS. frontstuff, 2018.
- 10+ Best Tailwind CSS Templates for Your Next Project. codeinwp, 1/27/2020.
- Ivaylo Gerchev. How to Build Unique, Beautiful Websites with Tailwind CSS. sitepoint, 9/12/2019.
- Harry Nichols. Simplifying Styling with Functional CSS. rangle, 2018.
SCSS/Sass
- The Complete Guide to SCSS/SASS. JavaScript Teacher, 1/13/2019.
- Buddy Reno. Sass Techniques from the Trenches. css-tricks, 5/2020.*
- Miriam Suzanne. Introducing Sass Modules. css-tricks, 10/14/2019.
- Miram Suzanne. How to Write Beautiful Sass. sitepoint, 10/2017.
- Darren Wood. Getting Started with Sass. sitepoint, 2017.
- Reggie Dawson. Sass Basics: The Sass Mixin Directive. sitepoint, 6/2017.
- Byroun Houwens. Sass Functions to Kick-Start Your Style Sheets. sitepoint, 8/2017.
- Chris Coyier. Where Do You Nest Your Sass Breakpoints? css-tricks, 4/2020.
- Jason Hogue. Programming Sass to Create Accessible Color Combinations. css-tricks, 3/2020.
CSS Houdini
- Adrian Bece. A Practical Overview of CSS Houdini. smashing magazine, 3/19/2020.
- Marcin Gajda. Revolution Incoming: CSS Houdini and the Future of Frontend Development. the software house, 1/2019.
Selectors
- Tiffany Brown.
- CSS Selectors: Combinators. sitepoint, 2017.
- CSS Selectors: Attribute Selectors. sitepoint, 2017.
Media
- Lari Maza. Fluid Images in a Variable Proportion Layout. css-tricks, 7/2020.
- James Steinbach. Preventing Content Reflow From Lazy-Loaded Images. css-tricks, 12/2019.
- A Guide to the Responsive Images Syntax in HTML. css-tricks, 11/2020.
- Barry Pollard. Setting Height and Width on Images is Important Again. smashingmagazine, 3/2020.
Other
- Lea Verou. A User’s Guide to CSS Variables. increment, 5/2020.
- Chris Coyier. Here’s The Thing About “Unused CSS” Tools. css-tricks, 2018.
- Good article that offers reasonable caution with using automated tools to find unused CSS.
- Chris Coyier. A Complete Guide to Data Attributes. css-tricks, 2020.
- Good article, the use of these data attributes appears to be increasing, note usage in Bootstrap for example.
- Colby Fayock. You Don’t Need CSS-in-JS: Why (and When) I Use Stylesheets Instead. freecodecamp, 2019.
- Fayock offers a guide to getting many of the advantages of CSS-in-JS using vanilla CSS without being too dogmatic about it.
- Zach Leatherman. The Origin Story of Container Queries. 12/12/2019.
- Chris Coyier. Let’s Not Forget About Container Queries. css-tricks, 10/2019.
- Rachel Andrew.
- A Guide to CSS Support in Browsers. smashing magazine, 2/4/2019.
- Things We Can’t (Yet) Do in CSS. smashing magazine, 11/1/2019.
- Tom McFarlin. The CSS Single Responsibility Principle. 2013.
- Tiffany Brown. Variables in CSS: Custom Properties. sitepoint, 9/2018.
- Chris Coyier. What Do You Name CSS Variables? css-tricks, 12/2018.
- Chris Coyier. A Complete Guide to calc() in CSS. css-tricks, 10/2020.
- Eric Bailey. A Complete Guide to CSS Functions. css-tricks, 1/2021.
UI Framework
- Bootstrap – 135k
- Materialize – 36.4k
- Bulma – 36.3k
Movement
- animate.css – 61.6k
- Hover – 21.7k
- SpinKit – 16.2k
- hint.css – 7.8k
Other
- normalize.css – 36k
- Tailwind CSS – 14.1k – Utility-first framework for rapid UI development.
- tachyons – 9.1k – Functional CSS
- primer/css – 8.5k – CSS design system used on GitHub.
Tools
- Purgecss.
- Tiffany Brown.
- CSS Debugging and Optimization: Browser-based Developer Tools. sitepoint, 10/5/2018.
- CSS Debugging and Optimization: Minification with CSSO. sitepoint, 10/5/2018.