alinedmelo/beyond-css

A course and additional materials regarding CSS architecture, specificity, rules and good practices

Beyond CSS

Course

• CSS um passo adiante - Tárcio Zemel

Specificity

1- Inline Styles

2- IDs

3- Classes, pseudoclasses and attributes

4- Elements and pseudoelements

Namespaces

Commom used namespaces:

• l-: Layouts
• o-: Objects
• c-: Components
• js: Javascript hooks
• is- | has: State classes
• t1 | s1: Typography sizes
• u-: Utility classes

Utils

Articles / Guides

• The Simplicity of Specificity
• BEM and SMACSS
• The SASS Way
• How to compile SASS files
• Awesome SASS
• Writing Modular CSS
• More Transparent UI Code with Namespaces
• Introdução ao Gulp
• JSON

Docs

• Eric Meyer’s Reset CSS
• Normalize - CSS Reset file
• RSCSS
• SMACSS
• BEM
• SASS
• COMPASS
• GULP
• Gulp Recipes

Tools

• Specificity Calculator
• SASS live compiler

Plugins for Gulp

• run-sequence - Define a sequence for Gulp tasks.

• gulp-htmlmin - HTML minify.

• gulp-concat - Concat files in a single one file, reducing the HTTP requests.

• gulp-cleancss - CSS minify.

• gulp-combine-media-queries - Combine matching media queries into one media query definition.

• uncss - Remove unused CSS from your stylesheet. Also supports Javascript injected CSS.

• gulp-uglify - Javascript minify.

• gulp-responsive - Generate images at different sizes.

• gulp-imagemin - Images minify

• gulp-webstandards - Improve the code following the best pratices and web standards