Your CSS is a Mess

Transcript

1. None

2. Jonathan Snoovvk The V’s are silent

3. YOUR CSS IS A MESS

4. None
5. None

6. 1 person.

7. None

8. 4 designers.

9. 5 developers.

10. 1 team.

11. 1 project.

12. None

13. 30 designers.

14. 5 prototypers.

15. 200 engineers.

16. multiple teams.

17. multiple projects.

18. CSS is easy.

19. None
20. None

21. li { }

22. oat: left padding: 3px 50px; margin: 0;

23. .block { display:block !important; } .inline { display:inline !important; }

    .hide { display:none !important; } .s-none { margin:0 !important; } .s { margin:10px !important; } .ss { margin:20px !important; } .sr { margin-right:10px !important; } .p-none { padding:0 !important; } .p { padding:10px !important; } .pp { padding:20px !important; } .pt { padding-top:10px !important; } .w-auto { width:auto !important; }

24. .layout_1_2 #blogList .pageitem .statusBar {} .layout_1_2 #blogList .pageitem .statusBar .status,

    #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}

25. #comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a

    {}

26. #nav-header ul li { float: left; } #nav-content ul li

    { float: left; }

27. 3 Considerations

28. 3 Categorization Naming Convention Decouple HTML/CSS

29. 1 Categorization

30. Categorization • Base • Layout • Module • State •

    Theme

31. Base

32. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;

    } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }

33. Layout

34. None

35. Sidebar Content Header

36. None
37. None
38. None

39. Module

40. Customized List Button Tabs

41. None
42. None
43. None
44. None
45. None
46. None
47. None

48. Sub-modules

49. Large Search Dark Small

50. None
51. None

52. State

53. Active State Default State Disabled State Default State

54. Theme

55. None
56. None
57. None

58. 2 Naming Convention

59. Naming Convention Naming convention clari es intent

60. Use Class over ID Don’t use a grenade to dig

    a hole when a shovel will do.

61. .btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}

62. .btn {} .is-btn-active {} .is-btn-disabled {}

63. .theme-header {} .theme-border {} .theme-background {}

64. .text-plus1 {} .text-minus1 {}

65. 3 Decoupling CSS from HTML

66. .nav { margin: 0; padding: 0; list-style: none; } .nav

    li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }

67. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/contact">Contact Us</a></li> </ul>

68. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a

    href="/products/jackets">Jackets</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> </ul>

69. .nav ul { margin: 0; padding:0; list-style:none; } .nav li

    li { float: none; } .nav li li a { padding: 2px; background-color: red; }

70. .nav { margin: 0; padding: 0; list-style: none; } .nav

    > li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }

71. .menu { margin: 0; padding: 0; list-style: none } .menu

    > li > a { display: block; padding: 2px; background-color: red; }

72. Please. Use child selectors

73. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

    </ul> </div>

74. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }

75. <div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>

    </ul> </div> <div class="box"> <h2>About Us</h2> <p>The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div><img src="http://example.com/img.png" alt="..."></div> </div>

76. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul, .box p, .box div { margin: 10px; }

77. .box { border: 1px solid #333; } .box h2 {

    margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }

78. <div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a

    href="http://smacss.com/">SMACSS</a></li> </ul> </div> <div class="box"> <h2>About Us</h2> <p class="box-body">The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>

79. when the HTML can’t or won’t be predictable Apply a

    class

80. What does it mean?

81. Shift your thinking

82. Don’t code CSS for the page. Code it for the

    system.

83. Have your CSS... Do one thing and one thing only

84. State-based Design

85. State-based Design • A layout or module style • Sub-modules

    • JavaScript-driven states • Pseudo-class states • Media query states

86. CSS Panic http://snk.ms/15

87. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;

88. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;

89. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

90. .enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }

91. 3 Categorization Naming Convention Decouple HTML/CSS

92. GET SMACKED http://smacss.com/