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

Organizing & Simplifying CSS [with Sass]

on

  • 3,128 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,128
Views on SlideShare
3,103
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] Organizing & Simplifying CSS [with Sass] Presentation Transcript

  • Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:28:43 -0500 26, 2010 Tue 2010
  • Gross
  • TIP #1 Use design principles
  • 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 }
  • 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;
  • 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;
  • 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;
  • 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 {…}
  • 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 {…}
  • TIP #2 Order by Speci city
  • <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • Point value based on: Style Attribute 1000 pts ID 100 pts Class or Attribute 10 pts Element 1 pt
  • blockquote 1
  • blockquote p 2
  • blockquote p.best 12
  • blockquote:hover p.best 22
  • #tagline 100
  • div#tagline 101
  • div#tagline p:last-child 102
  • <span style=“color: red”> 1000
  • <span style=“color: red”> 1000
  • 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • TIP #3 Try CSS meta- frameworks
  • version 3.0
  • 1 11 2 12 Nesting 3 header { 4 font: { 5 size: 18px; 6 weight: bold; 7 } 8 9 h2 { 1 color: blue; 0 }
  • 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
  • 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;
  • 1 11 2 12 Functions 3 $red: #c00; 4 5 a{ 6 color: $red; 7 8 :hover { 9 color: darken($red); 1 } 0 }
  • 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 {
  • 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;
  • 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
  • Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • TIP #1 Use design principles
  • TIP #1 Use design principles TIP #2 Order by speci city
  • TIP #1 Use design principles TIP #2 Order by speci city TIP #3 Try CSS meta-frameworks
  • anks! Any questions? Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:48:09 -0500 26, 2010 Tue 2010