The benefits of Atomic CSS - London Sass Feb 2016

Transcript

1. The benefits of Atomic CSS Richard Bray @Ceiga
2. Product Designer
3. Side Projects - richbray.me
4. Write articles and do talks, sometimes
5. Atomic CSS disclaimer alert!!!
8. Everyone doesn’t have to adopt this method.
9. What is Atomic CSS (ACSS)?
10. What is Atomic Design?
12. “Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.” Brad Frost
13. ACSS is a method of using one class for one CSS property so that same property can be used in different parts of a site.
14. What does that look like?
17. My preferred way of writing ACSS
28. Until–I tried media queries with it
30. Desktop Mobile
32. Pseudo Classes/Elements
33. acss.io
35. will-change
39. Wait, what about the round brackets () or parens if you’re American
41. mathiasbynens.be/notes/css-escapes
44. And that’s why I prefer - ()
45. 2 more advantages of using acss
46. 1. Quick prototyping
49. Preprocessor Normal Css Post Process Minify
50. Style Page Done!
51. 1. a Great way to visualise page
53. 2. Avoids overusing @extend
58. 4 disadvantages of using acss
59. 1. Lots of classes on a html element looks ‘ugly’
62. 2. Slight chance of bloating your CSS If not maintained
65. acss.io
68. 3. Requires more maintenance than normal css
71. 4. It’s just like inline css
73. - Can’t do media queries or pseudo classes - Inline css not cached - Uses more characters than acss
74. This isn’t a new concept
78. http://ux.mailchimp.com/patterns/helpers
79. http://ux.mailchimp.com/patterns/helpers
83. Open source acss projects
87. and much much more…
88. Everyone doesn’t have to adopt this method.
92. http://digitalcroydon.net/event/
93. Thank You! Richard Bray @Ceiga https://github.com/RichardBray