Cutting Edge CSS

This is a list of useful CSS related stuff.

Learn CSS

Name Note
css-tricks A great website about css and many others
smashmagzine A great website about web design
codepen You can find many interesting stuff on it


Name Note
css-almanac A reference guide to the many(but not all) features of CSS.
MDN-CSS CSS on MDN, recommended for daily use

CSS Naming Conventions

Name Note
BEM aka "Block Element Modifier"
SMACSS pronounced “smacks”, Scalable and Modular Architecture for CSS
oocss Object Oriented CSS Framework

CSS Tools:

Name Note
Sass Sass is a professional grade CSS extension language, aka CSS pre-processor
Less Less is a CSS pre-processor, kinda similar to Sass
Compass a CSS Authoring Framework or Library, it uses Sass under the hood
PostCSS a powerful competitor to Sass Less etc
SassMeister A Online Sass Playground
cssnext Use tomorrow's css today!
CSS Modules Avoid Global CSS styles
stylelint A modern linter for CSS

CSS with JS:

Name Note
Radium for React.js
[][] Angular2 Component Styles(use css class mangling)
[][] React Component Styles(use csss class mangling?)
[][] Polymer Component Styles(use Shadow DOM)

CSS Frameworks

Name Note
Bootstrap A very popular CSS framework, by Twitter engineers
Foundation Another popular CSS framework
Pure A very light-weight and simple css, by Yahoo engineers
Material-Design-Lite A lite material design framework by Google
MUI a lightweight CSS framework that follows Google's Material Design guidelines
Material-UI A Set of React Components that Implement Google's Material Design
Materialize A modern responsive front-end framework based on Material Design

CSS Shims

Name Note
HTML5-Polyfills List of many HTML5 Cross Browser Polyfills
modernizr Browser features detection


Name Note Powerful css/js/html feature lookup
html5please HTML5 feature lookup
codepen A great place to play css/html/js, to share code, or to find something fun!