Discussing the Pros and Cons of Using a CSS Framework

A CSS framework is a piece of software that has a lot of options for you to use in your HTML development, potentially making it faster and easier for you to develop your website or web app. A CSS framework does this by containing predefined libraries of code. One example is a grid-based framework which sets up a multi-column arrangement with predefined pixel widths so you can focus on creating content instead of lining up blocks of text.

But is it good to use a CSS framework? After all, sometimes something that saves you time ends up causing more problems down the line – rendering the saved time useless. Well, like with anything in life, there are both pros and cons of using a CSS framework.

There are plenty of CSS frameworks that do different things well, so you can find the specific one that helps you accomplish your web development goal faster. Speckyboy highlights 15 lightweight and minimal CSS frameworks, and there are also some CSS frameworks in the list of 20 new frameworks for web and mobile app developers.

But should you use these CSS frameworks for your web development? Here are the pros and cons of using a CSS framework:

1. Speeds up your development

A CSS framework lays out the groundwork for you so you can start developing quicker. It does that by giving you code for repetitive and common tasks—like resets—so you don’t need to write from scratch every time. And if you’re working with a team or collaborating with other developers, you all will have the same shared CSS code, so collaborative efforts are sped up as well.

2. Enables cross-browser functionality

Remember the hair-pulling frustration of having to constantly tweak your CSS code so that your website or web app looks similar on all browsers? Well, you can say goodbye to that annoyance by using a CSS framework, which takes care of that for you. It’s already coded to look similar across all browser, so you can focus on customizing and creating content rather than tweaking the base appearance. A CSS framework will also eliminate browser-specific bugs, which is a nice plus.

3. Gives you clean and symmetrical layouts

A grid-based CSS framework sets up a multi-column arrangement with predefined pixel widths so you can focus on creating content rather than lining up blocks of text. No more tweaking the pixel widths of columns to make sure they line up, or wondering if your sidebar width is standards-compliant for widgets or images, or any other annoyances that comes from guessing or figuring out what width you need to make your columns.

4. Enforces good web design habits

A CSS framework enforces good habits like including a print stylesheet. It also gives you a set of selectors that you’ll use for all websites and web apps that you develop with the framework, which creates consistency in your web design. You don’t have to guess or remember what you did for one site or another – it’s all consistent.

1. Restricts your freedom

Since a CSS framework has a standard set of grids, selectors, and other code, it limits what you can design: layout sizes, grid width, button types, styles, and anything else. You’re basically stuck with the same framework if you really want to save time and take advantage of using a CSS framework. Otherwise, you’ll spend time changing code or learning a new framework each time you want to do something different – like if you have a project which requires unique or unconventional parameters or design.

2. Adds extra code

A CSS framework will inevitably have code that you don’t need. Its highly unlikely that you’ll use every feature of a framework. You’re thus stuck with extra code, which could or could not be an issue depending on how light and lean you want to make your website or web app. If every byte is crucial, you’ll need to go in and strip away unused code in your CSS.

3. Forces you to use the framework’s semantics

By using a CSS framework, you’re forced into semantic changes, especially if the framework uses a non-standard naming scheme. This could be an annoyance if you have a preferred unique system for CSS elements and selectors and ID and class use and such, since the CSS framework will force you to use its system. Admittedly, it’s not a big deal for most—it’s like learning to drive a new car ie. you quickly adapt—but it is a reality of using a CSS framework. An issue where it can be a bigger problem is if you’re collaborating with other developers or designers or creating for a client that will later access code; they’ll have no idea what some of the names are, so they’ll need to become familiar with the framework’s semantics first.

4. You could potentially lose time

If you’re already familiar and effective with a certain way of designing and developing and you’re forced to use a CSS framework you’re not familiar with, you could potentially lose time. This could be a case of a client wanting to use a framework you’re not familiar with, or collaborating with designers who insist on a particular framework, or whatever else. Point is, CSS frameworks are a reality, they exist out there, people are aware of them, and some will want to use frameworks that you don’t care for and could accomplish the same task faster using your own way. Yeah, this is a bit of a stretch for a con, but like with the previous con, it’s a reality of CSS frameworks so it goes in the ‘cons’ list just in case.

Ultimately, are CSS frameworks good? Of course, for the same reason automatic transmission is good in cars. Meaning, most will use automatic transmission because it helps them drive how they need to simpler and faster. And when you get a new car, you get used to it pretty quickly. But there is a smaller subset of drivers who want to or need to drive using manual transmission – either for fuel efficiency, enjoyment, racing, or whatever other reason.

Most will benefit from the web development and design simplification that CSS frameworks give. But there will be a smaller subset who will stick to doing those tasks themselves to get precise control and results – just like manual drivers with gear shifting.

So should you use a CSS framework? For most designers, yes, you should consider using a CSS framework (hooray for no wishy-washy answer). However, it does ultimately depend on if you are the automatic or manual transmission of web designers.

Over to you: Do you have experience using CSS frameworks? What are some other pros and cons of using a CSS framework? Share your favorite reasons for or against CSS frameworks in the comments section below.

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.

Comments

  • shivabeach

    it is kind of a tough decision to use or not use a framework.  For one who enjoys using the new HTML 5 way of writing a website it seems to take away that semantic purity. In reality I think the end result of using a framework or not, the output is generally the same

  • I was on the fence about using a framework for a while but now that I’ve been doing so much responsive design it finally became worth it. They can really save you time in the end.

  • MM

    A good summary, but I think you are missing at least one bid con:
    If some part of a framework does not work the Way you want or need it to (Often it is not you but the client that feels that way) changing the behavior to the new way most of the times is much harder than building it from scratch, as you have to either understand the whole inner working to be sure that no undesired side-effects occur, or you have to test extensively. And you have to document any changes you made, so that the next developer will understand an/or the next bug-fix-update of the framework will not break your adjustments.
    In my (extensive) experience there is rarely a project where such a situation does not occur.
    Exceptions are projects where you are in full control aka your own client.

  • Thanks. This was one of the better discussions of CSS frameworks that I have come across. An interesting question to ask is whether or not, as a web designer, it is a good idea to create your own framework (i.e. template) for your projects.

  • Connor Gaughan

    Depends on how you work. If you work on your own and author your own code, then creating something to suit your needs is fine. Working with a team, you’ll most likely need to work within the boundaries of the teams framework.

    For example: I personally have a blank ‘theme’ I use that’s compiled from Sassparilla and the Semantic Grid System. Both of which I am extremely efficient in. Let’s say I started working with a team and they use Bootstrap… well I’m in for it now aren’t I? I’ll have to learn a whole new framework and a whole new set of semantics to go with it.

    Now am I in the wrong for using a code base that I’m familiar with and that I can effectively control? No. Is this hypothetical team in the wrong for using a code base I am not familiar with? No.

    It’s all just a learning curve and what you’re comfortable with.