What Is A CSS Framework Anyway?

What Is A CSS Framework Anyway? at SmartWeb Conference, Bucharest. September 2014.

VIDEO: https://vimeo.com/95734680

Transcript

1. What is a CSS Framework Anyway? SmartWeb—Bucharest, 2014
2. Harry Roberts Consultant Front-end Architect – @csswizardry
4. Disclaimer!
5. inuitcss.com
6. #wtf
7. #wtframework
8. A brief history of CSS frameworks Really, really brief…
9. Began in 2005. Possibly the first CSS framework. (Actually more than just a CSS framework.)
11. August, 2007. Wasn’t all-singing, all-dancing. Solved actual problems.
12. I started looking at existing CSS frameworks, trying to find one that was right for me […] the only viable option was the Yahoo UI Library, but […] YUI is just way too bloated for what I want from a framework.”
 — Olav Bjørkøy, 2007 “ ! ! ! ! bit.ly/P9RWf1
13. What’s wrong with CSS frameworks? According to you…
14. bit.ly/O8vpy0
25. Why people don’t use CSS frameworks Far too bloated. Most projects are unique—how can standard CSS accommodate bespoke UIs? Far too prescriptive and opinionated. They try to be all things to all men. They get in your way.
26. Bloat Size over the wire is bad for performance (i.e. users). Size on the filesystem is bad for developers.
27. Unique projects This is the problem with (conf)using UI Toolkits. Fully designed components aren’t reusable cross-project. This is where OOCSS is a GoodIdea™.
28. Opinionated To an extent, they need to be… …but only in the right places.
29. They try to be all things to all men Responsive. Mobile-first. Flat design. 101 specific components. Sold as a ‘framework’.
30. They get in your way All of the above problems compound. Now left with something that makes you less productive.
31. You’re now working in spite
 of—rather than because of—a CSS framework.
33. inuitcss.com *Ahem* *Cough* *Hint* *Cough* *Hint*
35. We have very strong opinions about CSS frameworks…
36. …why?
37. Why the strong opinions? It’s something we can all do ourselves—we don’t need any help, right? It’s ‘easy’, so it’s easy to have an opinion. As things get more complex, we have less opinions.
39. xkcd.com/927
40. Who so many? Another day, another GitHub project…
41. Water, water, every where, Nor any drop to drink.”
 — The Rime of the Ancient Mariner “ ! bit.ly/1hbvjwC
42. Or…
43. How on Earth do we have so many frameworks, yet still can’t pick one we might actually use?!” “ !
44. Why so many? Opinionated developers. Subtle differences. Selfishness. Perception of inability.
45. CSS frameworks vs. ‘others’ How do we keep getting them so wrong?
46. CSS frameworks vs. ‘others’ Everyone loves jQuery, Symfony, AngularJS, etc. Everyone hates CSS frameworks.
47. Release date Current version inuitcss April, 2011 ~6.0.0 Foundation October, 2011 5.2.1 Bootstrap April, 2011 3.1.1 CSS frameworks releases
48. Release date Current version jQuery August, 2006 2.1.0 Symfony October, 2005 2.4.2 WordPress May, 2003 3.8.1 ‘Other’ frameworks releases
49. If even the tiniest backwards incompatible changes to the public API require a major version bump, won't I end up at version 42.0.0 very rapidly? “ ! ! semver.org
50. This is a question of responsible development and foresight.
51. CSS Frameworks vs. UI Toolkits The differences.
53. frame·work
 noun
 a basic structure underlying a system, concept, or text.
54. UI Toolkits are often miss-sold as CSS Frameworks.
55. CSS Framework UI Toolkit
56. There is room for both.
57. UI Toolkit A full-on product. Implemented, not worked upon. Does the majority of the work.
58. UI Toolkit Great if you need a full UI out of the box. If you’re not great with either design or front-end dev. Fantastic for prototyping. Not suited to client work, or working with bespoke designs.
59. Nick Payne Software Engineer. Much cooler than I am. Keep Open-Sourcerer. Doesn’t want to be bogged down by UI. Needs something off-the-shelf. Needs a quick win. That’s fine. @makeusabrew
60. CSS Framework A helping hand. Should guide and lead decisions. More of a concept than a product. Makes up the minority of a project.
61. CSS Framework Good if you need help with scalability or architecture. Good if you aren’t particularly good with CSS… …but do have your own designs.
62. UI Toolkit CSS Framework Does the work for you. Offers a helping hand. Quick-win. Major commitment. Answers the ‘what?’ Answers the ‘how?’ Gets the job done. Gets the job started.
63. What is wrong with CSS? Unfortunately, almost all of it…
64. What is wrong with CSS? It’s old. Really old. It can’t be changed. It operates in a global namespace. It’s based on inheritance. It’s very, very loose. Source order is critical. The cascade needs managing. Specificity negates all of the above.
65. Where does that leave us? With an old, loose, leaky, globally-operating, inheritance-based language which is entirely dependent on source-order, except when you introduce its own worst feature: specificity.
66. CSS frameworks should work to solve these problems.
67. What a CSS framework should be A humble, helpful hint.
68. What a CSS framework should be An enabler. A helping hand. A school-of-thought. Highly configurable. Design-free. Ignorant/agnostic.
69. Don’t solve the fun bits,
 solve the difficult bits.
70. What a CSS framework should not be Prescriptive, cumbersome, designed.
71. What a CSS framework should not be A final solution. A UI toolkit. Designed. Prescriptive.
72. A [CSS] framework should not do your work for you, it should allow you to do
 your own work faster.
73. Should I write my own? Perhaps, but let’s see…
74. Should I write my own? What is its reason for being? Will it be similar to anything that already exists? Will it be a Framework or a UI Toolkit? Will you open-source it? Do you expect people to use it?
75. Recap
76. Recap Do we really mean framework? Do very little, if not less. Solve the tricky bits. Get out of the way. Let people do the fun stuff because of you. Get a goal, purpose, and roadmap in place.
77. Thank you Harry Roberts csswizardry.com @csswizardry speakerdeck.com/csswizardry/what-is-a-css-framework- anyway