Pro Yearly is on sale from $80 to $50! »

Teaching Our CSS To Play Nice

Abe38081ff1dc9cfe239d4f06831e47e?s=47 Jen Myers
October 06, 2012

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.

Abe38081ff1dc9cfe239d4f06831e47e?s=128

Jen Myers

October 06, 2012
Tweet

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

  17. None
  18. Single-line vs. multi-line

  19. None
  20. Reusable CSS

  21. Learn from programmers: don’t repeat yourself.

  22. None
  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