What Is A CSS Framework Anyway?

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
September 23, 2014

What Is A CSS Framework Anyway?

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

VIDEO: https://vimeo.com/95734680

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

September 23, 2014
Tweet

Transcript

  1. 3.
  2. 6.
  3. 10.
  4. 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
  5. 15.
  6. 16.
  7. 17.
  8. 18.
  9. 19.
  10. 20.
  11. 21.
  12. 22.
  13. 23.
  14. 24.
  15. 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.
  16. 26.

    Bloat Size over the wire is bad for performance (i.e.

    users). Size on the filesystem is bad for developers.
  17. 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™.
  18. 29.

    They try to be all things to all men Responsive.

    Mobile-first. Flat design. 101 specific components. Sold as a ‘framework’.
  19. 30.

    They get in your way All of the above problems

    compound. Now left with something that makes you less productive.
  20. 32.
  21. 34.
  22. 36.
  23. 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.
  24. 38.
  25. 41.

    Water, water, every where, Nor any drop to drink.”
 —

    The Rime of the Ancient Mariner “ ! bit.ly/1hbvjwC
  26. 42.
  27. 43.

    How on Earth do we have so many frameworks, yet

    still can’t pick one we might actually use?!” “ !
  28. 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
  29. 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
  30. 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
  31. 52.
  32. 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.
  33. 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
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 68.

    What a CSS framework should be An enabler. A helping

    hand. A school-of-thought. Highly configurable. Design-free. Ignorant/agnostic.
  40. 71.

    What a CSS framework should not be A final solution.

    A UI toolkit. Designed. Prescriptive.
  41. 72.

    A [CSS] framework should not do your work for you,

    it should allow you to do
 your own work faster.
  42. 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?
  43. 75.
  44. 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.