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.

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

6. Gross

7. TIP #1
Use design
principles

8. 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 }

9. 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;

10. 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;

11. 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;

12. 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 {…}

13. 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 {…}

14. TIP #2
Order by
Speci city

15. <span class=“info”>Hi!</
.info { color: green }
span { color: red }

16. <span class=“info”>Hi!</
.info { color: green }
span { color: red }

17. <span class=“info”>Hi!</
.info { color: green }
span { color: red }

18. Point value based on:
Style Attribute 1000 pts
ID 100 pts
Class or Attribute 10 pts
Element 1 pt

19. blockquote
1

20. blockquote p
2

21. blockquote p.best
12

22. blockquote:hover p.best
22

23. #tagline
100

24. div#tagline
101

25. div#tagline p:last-child
102

26. <span style=“color: red”>
1000

27. <span style=“color: red”>
1000

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. 1 11
2 12
3 p {…}
4 ul {…}
5
6 .error {…}
7 .notice {…}
8
9 input[type=“submit”] {…}
1
0 #container {…}

32. TIP #3
Try CSS meta-
frameworks

34. version 3.0

35. 1 11
2 12
Nesting 3 header {
4 font: {
5 size: 18px;
6 weight: bold;
7 }
8
9 h2 {
1 color: blue;
0 }

36. 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

37. 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;

38. 1 11
2 12
Functions 3 $red: #c00;
4
5 a{
6 color: $red;
7
8 :hover {
9 color: darken($red);
1 }
0 }

39. 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 {

40. 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;

41. 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

46. Installing Sass via Haml
$ gem install haml
$ mv styles.css styles.scss
$ sass --watch styles.scss:styles.css

47. Installing Sass via Haml
$ gem install haml
$ mv styles.css styles.scss
$ sass --watch styles.scss:styles.css

48. Installing Sass via Haml
$ gem install haml
$ mv styles.css styles.scss
$ sass --watch styles.scss:styles.css

49. Installing Sass via Haml
$ gem install haml
$ mv styles.css styles.scss
$ sass --watch styles.scss:styles.css

50. TIP #1
Use design principles

51. TIP #1
Use design principles
TIP #2
Order by speci city

52. TIP #1
Use design principles
TIP #2
Order by speci city
TIP #3
Try CSS meta-frameworks

53. anks!
Any questions?
Matt Puchlerz Refresh Chicago
@mattpuchlerz
GeekFest
MayJun 15 12:48:09 -0500
26, 2010
Tue 2010