aekaplan / css-workshop

CSS Workshop (Friday, November 7)

By Adam Kaplan and Stephanie Briones

In this three part workshop, you will learn how to write better CSS using best practices. We will be covering organization, writing reusable CSS, advanced techniques and more.

http://www.adamkaplan.me/css-workshop

##Schedule

####Part 1

• Normalize - Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern alternative to a reset like Normalize.css, which will render elements more consistently cross-browser.
• Organize - It's a good practice to organize your CSS code to reflect the flow of your website’s layout.
• Alphabetize - Write your CSS properties in alphabetical order; it will help reduce the time it takes to find a specific property.

####Part 2

• Reuseable CSS - DRY (Dont Repeat Yourself) up your code! Repeating yourself leads to huge CSS files and unnecessary code bloat. Take the time to plan out your elements in a simple and reusable way. Reuse your classes and tag on additional classes when needed.
• Reducing Markup - Remove unnecessary parent elements by iterating/refactoring often.
• Naming Classes - Write meaningful class names using BEM (Block, Element, Modifier) Methodology.

####Part 3

• Sass/SCSS - Overview of syntax and documentation.
• Setup - Project setup and imports.
• Best Features - Variables, nesting and mixins.

Requirements

• Laptop running Linux, Unix, or Mac OS X
• Text Editor (TextMate, Sublime, VIM)

Resources

• CSS Guidelines
• Code Guide
• Principles of writing consistent, idiomatic CSS
• Write Better CSS
• Normalize.css
• Sass
• SCSS
• Jekyll