Organizing & Simplifying CSS [with Sass]
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Organizing & Simplifying CSS [with Sass]

on

  • 3,167 views

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.

Statistics

Views

Total Views
3,167
Views on SlideShare
3,142
Embed Views
25

Actions

Likes
2
Downloads
34
Comments
0

4 Embeds 25

http://onwebdev.blogspot.com 14
http://www.slideshare.net 9
http://blog.gabrieleromanato.com 1
http://onwebdev.blogspot.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> Web craftsman <br /> <br /> One of many software craftspeople at Obtiva <br />
  • <br /> Web craftsman <br /> <br /> One of many software craftspeople at Obtiva <br />
  • <br /> Web craftsman <br /> <br /> One of many software craftspeople at Obtiva <br />
  • <br /> Web craftsman <br /> <br /> One of many software craftspeople at Obtiva <br />
  • <br /> Web craftsman <br /> <br /> One of many software craftspeople at Obtiva <br />
  • <br /> Show of hands <br /> <br /> Gross! <br /> <br /> Point out nauseating parts; offer tips <br />
  • <br /> Show of hands <br /> <br /> Gross! <br /> <br /> Point out nauseating parts; offer tips <br />
  • <br /> Steve Smith (Ordered List) gave a talk on &#x201C;Designing Code&#x201D; <br /> <br /> Don&#x2019;t just write CSS, sculpt it. <br />
  • <br /> Uneven brackets, indentation, spacing <br /> <br /> No alignment <br />
  • <br />
  • <br /> Could be whitespace between rules <br /> <br /> Within properties is &#x201C;progressive rhythm&#x201D;&#x2026; How to improve? <br />
  • <br /> Alphabetize! <br />
  • <br /> Items in close proximity to, or aligned with one another, ought to be grouped by similarity. <br /> <br /> .error class in several spots <br /> #header in several spots <br />
  • <br /> Now that we are grouping well, be mindful of order <br />
  • <br /> CSS properties are applied based on the specificity of their selector and their order. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br /> Popular &#x201C;frameworks&#x201D; like Blueprint and 960.gs just give us defaults <br /> <br /> &#x201C;Metaframeworks&#x201D; alter the way we write CSS <br />
  • <br />
  • <br />
  • <br />
  • <br /> Nesting selectors and properties <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Organizing & Simplifying CSS [with Sass] Presentation 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