Skip to content

Instantly share code, notes, and snippets.

@spjpgrd

spjpgrd/WTF CSS OMG.md

Last active June 11, 2019 13:33
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save spjpgrd/6765e93fa6403220b78eef7a6fcd58dc to your computer and use it in GitHub Desktop.
Save spjpgrd/6765e93fa6403220b78eef7a6fcd58dc to your computer and use it in GitHub Desktop.
Download ZIP
Common CSS resources I share with people getting started 🏆
Raw
WTF CSS OMG.md

WTF CSS OMG

  1. Atomic Design
  2. ITCSS: Inverted Triangle CSS
  3. Namespacing
  4. BEM
  5. BEM Cheat Sheet
  6. SMACSS: Scalable and Modular Architecture for CSS
  7. OOCSS: Objected-Oriented CSS
  8. RCSS: Reasonable CSS: I like the idea of two words for naming a component, and one word for a smaller element
  9. Accessibility for the Web
  10. CSS Specificity Graph Generator
  11. What’s CSS Specificity?
  12. Specificity CodePen Example
  13. CSS Selectors
  14. The Ultimate Guide to CSS Pseudo-Classes and Pseudo-Elements
  15. What's a CSS Preprocessor?
  16. Sass = .sass = .scss = confusing = awesome
  17. Emmet (previously known as Zen Coding)
  18. Mobile-first Design: The "downside" is an "upside"
  19. Mobile-first CSS
  20. Codepen: Create a new pen, go to settings, add in vendor CSS and JS, easily choose a pre-processor, save it as a template :)
  21. CSS Almanac
  22. Thoughtful CSS Architecture
  23. Naming CSS Stuff is Really Hard
  24. Grid Garden: A game for learning CSS grid

Utility-First

I've really gotten into using utility-first CSS, and then falling back to OO-BEM-ITCSS.

Here are two projects to look at to get the idea of it.

  1. Tachyons: A CSS toolkit of utility classes
  2. Tailwind CSS: A utility-first CSS framework — all in JavaScript
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment