Your SlideShare is downloading. ×
0
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Organizing & Simplifying CSS [with Sass]

2,507

Published on

Many fall into the habit of writing poor CSS, often due to a lack of structure. Here I present some common pitfalls, and tips by which to overcome them.

Many fall into the habit of writing poor CSS, often due to a lack of structure. Here I present some common pitfalls, and tips by which to overcome them.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,507
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

  • Web craftsman

    One of many software craftspeople at Obtiva

  • Web craftsman

    One of many software craftspeople at Obtiva

  • Web craftsman

    One of many software craftspeople at Obtiva

  • Web craftsman

    One of many software craftspeople at Obtiva

  • Web craftsman

    One of many software craftspeople at Obtiva

  • Show of hands

    Gross!

    Point out nauseating parts; offer tips

  • Show of hands

    Gross!

    Point out nauseating parts; offer tips

  • Steve Smith (Ordered List) gave a talk on “Designing Code”

    Don’t just write CSS, sculpt it.

  • Uneven brackets, indentation, spacing

    No alignment


  • Could be whitespace between rules

    Within properties is “progressive rhythm”… How to improve?

  • Alphabetize!

  • Items in close proximity to, or aligned with one another, ought to be grouped by similarity.

    .error class in several spots
    #header in several spots

  • Now that we are grouping well, be mindful of order

  • CSS properties are applied based on the specificity of their selector and their order.






















  • Popular “frameworks” like Blueprint and 960.gs just give us defaults

    “Metaframeworks” alter the way we write CSS




  • Nesting selectors and properties


















  • Transcript

    • 1. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
    • 2. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
    • 3. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
    • 4. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:28:43 -0500 26, 2010 Tue 2010
    • 5. Gross
    • 6. TIP #1 Use design principles
    • 7. 1 11 2 12 Balance 3 .carousel { 4 width:80%;height:50px} 5 6 blockquote 7 { 8 position: relative; 9 padding: 0px; 1 color: #555; Images © Digital Web Magazine 0 }
    • 8. 1 11 2 12 Balance 3 .carousel { 4 width: 80%; 5 height: 50px; 6 } 7 8 blockquote { 9 position: relative; 1 padding: 0; Images © Digital Web Magazine 0 color: #555;
    • 9. 1 11 2 12 Rhythm 3 #branding { 4 width: 350px; 5 height: 150px; 6 padding: 0px; 7 position: absolute; 8 top: 15px; 9 left: 20px; 1 background: #c00; Images © Digital Web Magazine 0 color: #fff;
    • 10. 1 11 2 12 Rhythm 3 #branding { 4 background: #c00; 5 color: #fff; 6 height: 150px; 7 left: 20px; 8 padding: 0; 9 position: absolute; 1 top: 15px; Images © Digital Web Magazine 0 width: 350px;
    • 11. 1 11 2 12 Proximity 3 #header {…} 4 .error {…} 5 .error p {…} 6 7 .info {…} 8 .error ul {…} 9 .info p {…} 1 Images © Digital Web Magazine 0 #header a {…}
    • 12. 1 11 2 12 Proximity 3 .error {…} 4 .error p {…} 5 .error ul {…} 6 7 .info {…} 8 .info p {…} 9 1 #header {…} Images © Digital Web Magazine 0 #header a {…}
    • 13. TIP #2 Order by Speci city
    • 14. <span class=“info”>Hi!</ .info { color: green } span { color: red }
    • 15. <span class=“info”>Hi!</ .info { color: green } span { color: red }
    • 16. <span class=“info”>Hi!</ .info { color: green } span { color: red }
    • 17. Point value based on: Style Attribute 1000 pts ID 100 pts Class or Attribute 10 pts Element 1 pt
    • 18. blockquote 1
    • 19. blockquote p 2
    • 20. blockquote p.best 12
    • 21. blockquote:hover p.best 22
    • 22. #tagline 100
    • 23. div#tagline 101
    • 24. div#tagline p:last-child 102
    • 25. <span style=“color: red”> 1000
    • 26. <span style=“color: red”> 1000
    • 27. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
    • 28. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
    • 29. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
    • 30. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
    • 31. TIP #3 Try CSS meta- frameworks
    • 32. version 3.0
    • 33. 1 11 2 12 Nesting 3 header { 4 font: { 5 size: 18px; 6 weight: bold; 7 } 8 9 h2 { 1 color: blue; 0 }
    • 34. 1 11 2 12 Variables 3 $orange: #c75000; 4 5 body { 6 background: $orange; 7 font-family: $ff; 8 line-height: $lh; 9 } 1 0
    • 35. 1 11 2 12 Math 3 $lh: 20px; 4 5 dl, ol, p, ul { 6 line-height: $lh; 7 margin-bottom: $lh; 8 } 9 1 #container { 0 padding: $lh / 2;
    • 36. 1 11 2 12 Functions 3 $red: #c00; 4 5 a{ 6 color: $red; 7 8 :hover { 9 color: darken($red); 1 } 0 }
    • 37. 1 11 2 12 Mixins 3 @mixin rounded($rad) { 4 -moz-border-radi… 5 -o-border-radius… 6 -webkit-border-r… 7 } 8 9 input[type=“submit”], 1 select, 0 textarea {
    • 38. 1 11 2 12 “SCSS” 3 $lh: 18px; Syntax 4 5 #feature { 6 padding: $lh; 7 width: $lh * 10; 8 9 &:hover { 1 @include rounded; 0 padding: $lh * 2;
    • 39. 1 11 2 12 “SASS” 3 $lh: 18px Syntax 4 5 #feature 6 padding: $lh 7 width: $lh * 10 8 9 &:hover 1 @include rounded 0 padding: $lh * 2
    • 40. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
    • 41. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
    • 42. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
    • 43. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
    • 44. TIP #1 Use design principles
    • 45. TIP #1 Use design principles TIP #2 Order by speci city
    • 46. TIP #1 Use design principles TIP #2 Order by speci city TIP #3 Try CSS meta-frameworks
    • 47. anks! Any questions? Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:48:09 -0500 26, 2010 Tue 2010

    ×