Using single property classes in CSS - FEL Nov 2015

Transcript

1. 1.

   Using single property classes in CSS Richard Bray @ceiga

2. 2.

   This is the first time I’ve ever done a talk

3. 3.

   This is my first FEL event!

4. 4.

   None
5. 5.

   Why?

6. 6.

   None
7. 7.

   Who am I?

8. 8.

   Developer / Designer / Product Designer

9. 9.

   None
10. 10.

    Side Projects - richbray.me

11. 11.

    The Problem

12. 12.

    CSS has become complicated

13. 13.

    Before Write CSS Upload it. Done!

14. 14.

    Now Preprocessor Normal Css Post Process Minify

15. 15.

    Now Preprocessor Normal Css Post Process Minify

16. 16.

    Now Preprocessor Normal Css Post Process Minify Server Side Language

    Terminal Knowledge
17. 17.

    Now Version Control (maybe)

18. 18.

    None
19. 19.

    Multiple files

20. 20.

    What If?

21. 21.

    None
22. 22.

    Typical Process 1. Inspect Element in Chrome 2. Make change

    in Developer Tools 3. Run site locally 4. Locate .scss file and change 5. Save and View 6. Go through process mentioned previously
23. 23.

    Typical Process 1. Inspect Element in Chrome 2. Make change

    in Developer Tools 3. Run site locally 4. Locate .scss file and change 5. Save and View 6. Go through process mentioned previously
24. 24.

    New Process 1. Inspect Element in Chrome 2. Make change

    in Developer Tools 3. Update and save html file
25. 25.

    Not inline CSS

26. 26.

    Helper (or single property) Classes

27. 27.

    None
28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    New Process 1. Inspect Element in Chrome 2. Make change

    in Developer Tools 3. Update and save html file
33. 33.

    How do you implement this?

34. 34.

    Either

35. 35.

    Or visit richbray.me/bricks

36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    Similar naming convention

40. 40.

    Or visit richbray.me/bricks

41. 41.

    New projects only! (unless you’re refactoring)

42. 42.

    Let your HTML do the work

43. 43.

    Another Thing

44. 44.

    Not a fan of @extends

45. 45.

    None
46. 46.

    None
47. 47.

    Use @mixins instead

48. 48.

    3 issues with this method

49. 49.

    1. Lots of classes on a html element looks ‘ugly’

50. 50.

    None
51. 51.

    None
52. 52.

    None
53. 53.

    2. Slight chance of bloating your CSS

54. 54.

    None
55. 55.

    None
56. 56.

    You Could

57. 57.

    Or Just leave it 2 KB compressed 82.34 KB compressed

58. 58.

    3. Media queries is tough

59. 59.

    None
60. 60.

    Desktop Mobile

61. 61.

    None
62. 62.

    This isn’t a new concept

63. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    None
67. 67.

    http://ux.mailchimp.com/patterns/helpers

68. 68.

    http://ux.mailchimp.com/patterns/helpers

69. 69.

    Thank You! Richard Bray @Ceiga https://github.com/RichardBray

70. 70.

    http://digitalcroydon.net/event/