Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Meetup at The Hive in Rock Hill, SC - 2014


Published on

CSS Meetup - June 16, 2014 at The Hive in Rock Hill, SC.
Discussing CSS Levels, Cleaning up dirty code, preprocessors, and 5 mistakes to avoid.

Published in: Design, Technology, Education
  • Be the first to comment

  • Be the first to like this

CSS Meetup at The Hive in Rock Hill, SC - 2014

  1. 1. {CSS} A RandomTalk about Carolina Style Sheets by John Rouda
  2. 2. John Rouda Professional Jack of AllTrades
  3. 3. Elegance of CSS
  4. 4. What to talk about? CSS 1, 2, 3….4? Understanding CSS Levels Cleaning upYour Dirty CSS CSS Preprocessors (Less, Sass, Stylus) Mistakes to Avoid in CSS
  5. 5. CSS 1, 2, 3, 4? Understanding CSS Levels (versions, etc.)
  6. 6. CSS 1 W3C Specs CSSWG 1996 – Font Properties, alignment, etc.
  7. 7. CSS 2 Published in 1998 Superset of CSS1 Absolute, relative, fixed, etc. Then, we found it was all wrong, and made CSS 2.1
  8. 8. CSS 3 Not a version of CSS (unlike 1, 2, 2.1) Factored into Modules and modules are leveled. Earliest drafts were in 1999. By June 2012 over 50 CSS3 Modules were published: Media Queries, Namespaces, Selectors, etc.
  9. 9. CSS4
  10. 10. CSSWG Process Brainstorming Working Draft (WD) Last Call (LCWD) Candidate Recommendation (CR) Proposed Recommendation (PR) Recommendation (REC)
  11. 11. Cleaning upYour Dirty CSS We’ve all got it… let’s just clean it up.
  12. 12. 3 Ways to keep it clean 1. Group Reusable Properties together 2. Use naming Conventions 3. KeepYourTabs Straight
  13. 13. Group Reusable Properties Reduce, Reuse, Recycle SMACSS & OOCSS
  14. 14. Naming Connection .
  15. 15. KeepingYour Tabs Straight
  16. 16. CSS PreProcessors Less, Sass, Stylus and why use them at all?
  17. 17. Preprocessors Less For those that fear command line Download Sass For the Ruby folks sudo gem install sass sudo gem install compass Stylus For the node.js folks sudo npm install stylus -g
  18. 18. Reasons to Use a Preprocessor It’s Fun! There are frameworks built on them, such as Compass built on Sass. Easy to install – gem install sass, or Organizes your CSS Makes your code easier to maintain Makes your CSS DRY SavesTime Gives you what CSS should have to begin with: Calculations, Functions,Variables, Nesting, Mixins, etc.
  19. 19. CoolThings with PreProcessors
  20. 20. MistakesTo Avoid 5 Mistakes to Avoid
  21. 21. 1) Forgetting Comments Always comment your code… the more detail the better.
  22. 22. 2) Using Inline Styles They are a lazy coder’s way of doing things.
  23. 23. 3) Forgetting DRYTechniques Don’t RepeatYourself – Avoid repeating code… WET = We EnjoyTyping
  24. 24. 4) Not Using Shorthand
  25. 25. 5) Calling it Carolina Style Sheets Cascading Style Sheets
  26. 26. ThankYou @johnrouda Follow me onTwitter @johnrouda Checkout my book