Crafting Scalable Stylesheets

Transcript

1. CRAFTING SCALABLE STYLESHEETS Mike Fowler @michaelrfowler VT CodeCamp 2012

2. None

3. www.sass-lang.org

4. www.compass-style.com

5. WE WANT MAINTAINABILITY AND SCALABILITY

6. WE WANT NEED MAINTAINABILITY AND SCALABILITY

7. CSS IS A PUSHOVER

8. FILE STRUCTURE •Logical grouping •Modular architecture •Inline documentation

9. SEMANTICS

10. SEMANTICS CONTENT-DEPENDENT CONTENT-INDEPENDENT

11. None
12. None

13. OBJECT-ORIENTED CSS

14. None
15. None
16. None
17. None
18. None

19. @EXTEND FOR GREAT GOOD

20. None
21. None
22. None
23. None
24. None

25. CENTRALIZE YOUR APPLICATION SETTINGS

26. None

27. VARIABLES SIMPLIFY COMMON STYLESHEET UPDATES

28. None
29. None
30. None

31. VARIABLE SEMANTICS

32. “SMART” VARIABLES

33. None
34. None
35. None

36. • Frequently changed • Time-consuming to maintain • -webkit-f*#k: this;

    BROWSER PREFIXES
37. None
38. None

39. READABLE MEDIA QUERIES

40. None
41. None
42. None
43. None
44. None
45. None

46. MIXINS HELP TO CONTEXTUALIZE COMPLEX CODE

47. None
48. None

49. MEET http://susy.oddbird.net/

50. MEET http://susy.oddbird.net/

51. None
52. None

53. STYLE GUIDES

54. https://github.com/styleguide/css/1.0

55. https://github.com/styleguide/css/1.0

56. http://warpspire.com/kss/

57. http://jacobrask.github.com/styledocco/

58. KEEP DOCUMENTATION USEFUL AND UPDATED

59. GET STARTED NOW

60. http://livereload.com/

61. http://incident57.com/codekit/

62. http://mhs.github.com/scout-app/

63. PREPROCESSORS ENCOURAGE RETHINKING

64. RETHINKING ENCOURAGES NEW TECHNIQUES

65. NEW TECHNIQUES PROGRESS OUR CRAFT

66. THANK YOU Tweet: @michaelrfowler Blog: mikefowler.me Mail: [email protected] https://speakerdeck.com/u/mikefowler/