Teaching Our CSS To Play Nice

As our websites, applications and teams grow larger and more complicated, so does our CSS. Before we know it, we find ourselves no longer with cute little stylesheets, but sprawling, surly teenaged CSS that doesn’t always play nice with others. We need to learn how to manage and optimize our CSS no matter how large the project or diverse the team. If we start early, we can use best practices and tools to raise full-grown stylesheets any designer or developer would be happy to work with.

Transcript

1. TEACHING OUR CSS TO PLAY NICE Jen Myers • @antiheroine • Chicago Web Conf • October 2012
2. As our teams and projects grow, so does our CSS.
3. Multiple files, frameworks, bootstraps, preprocessors, syntax preferences, various team members, oh my.
4. We start with cute little stylesheets and end up with surly, teenaged CSS that refuses to do what it’s told.
5. BABY STEPS Beginning a new project
6. Think about: project scope, file organization and tools.
7. Do we use frameworks?
8. If you choose a framework, invest in a little customization.
9. What is a preprocessor?
10. Sass vs LESS
11. GROWING UP RIGHT Best micro practices
12. Write the CSS you would like to edit.
13. Property order
14. 45% grouped by type 39% randomly 14% alphabetical 2% by line length http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
15. http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/
16. Section organization
18. Single-line vs. multi-line
20. Reusable CSS
21. Learn from programmers: don’t repeat yourself.
23. GOING OUT INTO THE WORLD Sharing your styles
24. Don’t forget plain, old-fashioned communication.
25. Find your own balance.
26. Jen Myers Designer Relevance jen@thinkrelevance.com