{"id":1211,"date":"2008-10-22T05:45:12","date_gmt":"2008-10-22T12:45:12","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1211"},"modified":"2008-10-20T18:48:22","modified_gmt":"2008-10-21T01:48:22","slug":"what-are-the-benefits-of-using-a-css-framework","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/what-are-the-benefits-of-using-a-css-framework\/","title":{"rendered":"What Are The Benefits of Using a CSS Framework?"},"content":{"rendered":"<p><a href=\"http:\/\/vintom.com\/\" rel=\"noopener\">Vin Thomas<\/a> sent in this question <a href=\"http:\/\/twitter.com\/vintom\/statuses\/956729114\" rel=\"noopener\">through Twitter<\/a>:<\/p>\n<blockquote><p>What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?<\/p><\/blockquote>\n<p>I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually do some projects using them so I can see how they &#8220;feel&#8221; in real usage. That makes me tired just thinking about it.<\/p>\n<p>Instead of all that work (ha!), I&#8217;m going to try and get out my feelings on the subject of CSS frameworks and maybe I&#8217;ll convince myself of something before I&#8217;m done writing this. To be clear before we are start, I am talking about things like <a href=\"http:\/\/code.google.com\/p\/blueprintcss\/\" rel=\"noopener\">Blueprint CSS<\/a>, <a href=\"http:\/\/developer.yahoo.com\/yui\/grids\/\" rel=\"noopener\">Yahoo! Grids<\/a>, <a href=\"http:\/\/code.google.com\/p\/logicss\/\" rel=\"noopener\">logicss<\/a>, <a href=\"http:\/\/www.yaml.de\/en\/\" rel=\"noopener\">YAML<\/a>, etc. (Yeah there are tons more, no need to list them all, I&#8217;m sure you can google a better roundup elsewhere).<\/p>\n<p>Let&#8217;s start with &#8220;the good&#8221;. Not what they <em>promise<\/em>, but what I feel like you could probably <em>realistically gain<\/em> from using a framework. <\/p>\n<h3>The Good<\/h3>\n<ul>\n<li><strong>They can help you learn CSS.<\/strong> You might just literally not know how to pull off a solid multi-column layout. A framework may be a good place to get your feet wet understanding how CSS works.<\/li>\n<li><strong>They provide code that you just don&#8217;t need to write from scratch every time, like resets.<\/strong> I&#8217;ve long been a proponent that the star selector (*) margin\/padding reset is a fine reset. I use it all the time. But&#8230; if you are starting a major new project that is going to be loads of pages, live for years and years, and will grow over time, you should invest right away in a more robust reset. All these frameworks start with brilliant resets that cover all the bases and will have you covered for years to come.<\/li>\n<li><strong>They relieve cross-browser concerns.<\/strong> You can&#8217;t undervalue this. We&#8217;ve all felt the burn of finding out our sites are borked in some browser or another at a hugely inopportune time. Frameworks are built to bring their magic to all browsers.<\/li>\n<li><strong>It helps you build good habits.<\/strong> Like including a print stylesheet in your projects. I always intend to build one, and I often do, but the chances are a lot higher that I do it if I have one there from the get-go.<\/li>\n<li><strong>They encourage grid based design.<\/strong> Which is a good thing. Grids don&#8217;t mean boring! They just help you achieve better readability, scanability, balance visual weight, flexibity, expandability, and just overall page page cohesiveness.<\/li>\n<li><strong>They come with documentation.<\/strong> If you need help getting started, framework generally come with some support files. This can be particularly nice if you are designing a site you will be handing off to a client. You can just let them know what framework you used and refer them to that documentation for support requests.<\/li>\n<li><strong>They lay groundwork<\/strong>. If you are using something like YUI, your life will be a lot easier if you use All-YUI-Stuff-All-The-Time. It&#8217;s built to work together and built for expandability.<\/li>\n<\/ul>\n<h3>The Bad<\/h3>\n<ul>\n<li><strong>In order to really benefit, and actually save time, you&#8217;ll need to use one framework over and over.<\/strong> The all tell you that you&#8217;ll save time, but I&#8217;m thinking this is only really true once you start getting comfortable in a framework. This isn&#8217;t like upgrading your horse and buggy to a Model T where you are gonna save time getting across town the next day.<\/li>\n<li><strong>It changes the way you write your HTML<\/strong>. I&#8217;ve wrapping my websites in a div called &#8220;page-wrap&#8221; forever. Well too bad, it&#8217;s called &#8220;container&#8221; in logicss. Yeah, it&#8217;s a little thing, but I like to write markup how I like to write markup, not based around some frameworks predetermined class\/ID names.<\/li>\n<li><strong>They can be bloat-y<\/strong>. There may be CSS styles set up in a framework to accommodate tons of different layouts that you&#8217;ll never use. If you are concerned about every byte of a web page, you are going to end up doing a lot of stripping away of usused code, which ruins the point of the framework.<\/li>\n<li><strong>They can enable clients to become dangerous.<\/strong> I once did a job where the client wanted everything to be done with YUI, starting with grids. I spent more time learning about YUI and trying to figure out how to stuff an already-designed Photoshop file into it than I did actually sweating the details and focusing on quality. Ultimately we got it done, but the time spent was easily tripled trying to use this framework that I can&#8217;t imagine was very useful in the end.<\/li>\n<\/ul>\n<h3>Well?<\/h3>\n<p>So I said I would probably convince myself of something while writing this. I think I have, and that just for me personally, CSS frameworks aren&#8217;t for me. I feel like all-said, CSS is a pretty simple language. I kinda <strong>like<\/strong> writing my own CSS. I don&#8217;t feel like a need any help and I can&#8217;t really picture any framework saving me loads of time.  That&#8217;s just me though, and you should make your own call. Heck, I&#8217;m no Blue Flavor and <a href=\"http:\/\/blueflavor.com\/blog\/2007\/oct\/24\/blueprint-css-101\/\" rel=\"noopener\">they sure like it<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vin Thomas sent in this question through Twitter: What are the benefits of using a CSS framework? And would you suggest that over starting from scratch? I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":307618,"url":"https:\/\/css-tricks.com\/the-cost-of-javascript-frameworks\/","url_meta":{"origin":1211,"position":0},"title":"The Cost of Javascript Frameworks","date":"April 26, 2020","format":false,"excerpt":"I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than non-JavaScript-framework-powered\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306641,"url":"https:\/\/css-tricks.com\/no-class-css-frameworks\/","url_meta":{"origin":1211,"position":1},"title":"No-Class CSS Frameworks","date":"April 13, 2020","format":false,"excerpt":"I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class=\"is-title\">. You just use semantic HTML and get styles. Is that going to \"scale\" very far? Probably not, but it sure is handy for styling things quickly, where \u2014 of course \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/classless-css-framework-logos.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302768,"url":"https:\/\/css-tricks.com\/getting-acquainted-with-svelte-the-new-framework-on-the-block\/","url_meta":{"origin":1211,"position":2},"title":"Getting Acquainted With Svelte, the New Framework on the Block","date":"February 6, 2020","format":false,"excerpt":"For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks, but they might leave a bitter taste for anyone who advocates for an open and unbiased web. Vue is another popular framework that has multiple\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svelte-radiant.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336024,"url":"https:\/\/css-tricks.com\/web-frameworks-why-you-dont-always-need-them\/","url_meta":{"origin":1211,"position":3},"title":"Web Frameworks: Why You Don\u2019t Always Need Them","date":"March 9, 2021","format":false,"excerpt":"Richard MacManus explaining Daniel Kehoe's approach to building websites, which he calls \"Stackless\": There are three key web technologies underpinning Kehoe\u2019s approach: ES6 Modules: JavaScript ES6 can support import modules, which are also supported by browsers. Module CDNs: JavaScript modules can now be downloaded from third-party content delivery networks (CDNs).\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/6d65f352-painter-2798557_1280-1024x576-1.jpg?fit=1024%2C576&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344542,"url":"https:\/\/css-tricks.com\/jamstack-community-survey-2021\/","url_meta":{"origin":1211,"position":4},"title":"Jamstack Community Survey 2021","date":"July 13, 2021","format":false,"excerpt":"The folks over at Netlify have opened up the Jamstack Community Survey for 2021. More than 3,000 front-enders like yourself took last year's survey, which gauged how familiar people are with the term \"Jamstack\" and which frameworks they use. This is the survey's second year which is super exciting because\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/jamstack-community-survey-og-image-14.png?fit=1200%2C624&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333262,"url":"https:\/\/css-tricks.com\/components-server-side-vs-client-side\/","url_meta":{"origin":1211,"position":5},"title":"Components: Server-Side vs. Client-Side","date":"January 28, 2021","format":false,"excerpt":"Building a website in 2021? I\u2019m guessing you\u2019re going to take a component-driven approach. It\u2019s all the chatter these days. React and Vue are everywhere (is Angular still a thing?), while other emerging frameworks continue to attempt a push into the spotlight. Over the last decade or so we\u2019ve seen\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/s_B88F21F40E255B01805BDE26E3615C774E5A4E88B986EDD4271F833852A3D101_1610624153511_server-vs-client-comps-ssr-render.jpg?fit=910%2C613&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1211"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1211"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1211\/revisions"}],"predecessor-version":[{"id":1228,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1211\/revisions\/1228"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}