CSS framework or hand coded CSS?
You might be new, and you might wonder, when is it a good idea to use a CSS framework? In today’s day, I see way too many beginners relying on CSS framework such as Twitter Bootstrap to make the layout of a website. There are more than Twitter Bootstrap but the framework is one of the most popular out there, and easy to use. Not to mention, there are many of CSS frameworks out there, such as Foundation Zurb, Skeleton and much more.
When should you use one of those frameworks, when should you hand-code the website yourself? In this article, I’m going to help you explain what I think about this topic.
Both have a different purpose and they both require a different skill level.
When should I use CSS framework and when Hand Code?
If you’re new to front-end, specifically HTML and CSS, you must build a solid foundation, and understand the core concept of how the code works, on why. Having a solid foundation will enable you to have the ability to do anything, but it requires a lot of dedicated time to it.
CSS Frameworks are just a pair of tools to make our work easier and faster, they are not a replacement for pure HTML and CSS. Before you start to run, you need to learn how to walk.
I see way too many beginners using Twitter Bootstrap for their project, loading all of the robust frameworks, when they just need few items for their landing page/portfolio – I did that too!
While using a CSS framework is great, you will struggle on how to do things with CSS if you don’t have a strong foundation and don’t understand the concept behind it.
Frameworks can save a lot of initial setups, they are robust with the features they have to offer, and they are battle tested – meaning they have a strong cross-browser combability.
The dark side of both
Hand coding everything can be daunting and can require a lot of time to learn on to solve a particular problem and learn how to do it.
When working with hand-coding, you will need to make sure you’re using all the prefixes that are needed, and other tricks so the website renders correctly on all browsers, cross-browser combability is what you need to be aware – which can be tricky, always, especially when you’re new.
The dark side of frameworks is, that you need to be very experienced on how to customise and optimise them.
Frameworks like Twitter Bootstrap have their default UI and UX out of the box. It’s hard to change those and make them unique – while it’s doable, you need to know how to manipulate bootstrap and learn a bunch of different things.
Someone has checked a CSS framework, and here’s what they had to say about the inspected website “ they are using 4 very inefficient rules, 24 inefficient rules, and 14 potentially inefficient uses of :hover out of 366 total rules. Almost half, (48.4% ) of CSS is not used”.
These frameworks are very robust, you need a specific project for them – you can always extract what you don’t need.
Difference between vanilla CSS and a Framework
Hand code website
If you hand-code a website, it will be not only lighter, but you will use what you need for the website. It can take a longer time to set up but think about it as working now, for better future. When you use a framework, you are in debt, because you’re using the starting foundation of that frameworks. Once you start the work, you start paying the debt off, by needing constantly selecting the elements in the Inspector tool, copying them and changing the values in your styles.css, and perhaps sometimes it won’t work, and you get the temptation to use the !important, which can be good, or most likely bad.
Bootstrap is battle tested, while your code is not.
I believe that with more time, you will learn how to make your code a lot better, so it will be browser compatible. Once you learn about these things, it will be much easier to debug, and you will know in advance what to do to avoid those bugs.
The good side of CSS frameworks
The good side of CSS frameworks is that they use some methodologies such as OOCSS(Object Oriented CSS), such as for buttons. Now, while the naming might not be the best, and the site might not be the most semantic, I truly believe in starting writing a better code is to use a CSS framework, for learning purposes.
At first, when you start you have no idea how to name thing, or how to organise them. A framework such as Twitter bootstrap, will help you to get some idea. When I was learning bootstrap, my naming’s were horrible! With bootstrap I got a better idea on how I can structure it, for example, you have default button styles in a ‘btn’ , and perhaps now you want to modify its colours, so you simply add another class ‘btn btn-primary’ or perhaps ‘btn btn-warning’ – and there you go, two different buttons, that are exactly the same, with different colour. You can do that for the size and anything else.
The CSS frameworks help you to set up the whole initial starting point, very fast, in fact, it’s almost out of the box. Comparing it to hand code, you need to create everything again, and make the foundation yourself – which can be very challenging for those that are starting out.
Selecting the classes
When using a CSS framework, to edit anything, you need to inspect the element, and take the obscure long class name, with many nesting, copy it, and change the value – perhaps it won’t work, so you might just use !important. !important is pretty common in bootstrap to see, from when I look at others people code, however that might be out of experience or it shows us how tricky the frameworks are.
When working in a team, everyone will be familiar with bootstrap (those who have used it). There is one standard to follow, and no one should really ask about anything related to bootstrap, as everything is well documented and described. There is a robust documentation online, and if any questions what so ever, most problems are already covered on stack overflow – unless it’s a project-specific question.
This makes the development a lot easier and faster. If we take ten different developers, that uses different naming and techniques to style their web sites, and now they are going to work together, it’s going to be a mess. There are needed some standards to follow.
Personally, I prefer to hand-code everything. Now, it is time-consuming, that’s why I think it’s a great idea to have your personal standards, or perhaps if you’re in an agency or company, follow their standards – which I’m sure they should have.
This makes the development a lot more faster, co-operative and efficient.
Knowing how to hand-code it’s also a big challenge, as there are many, many things to know how to do them properly. Hand code should be maintainable, scalable and clean – this can take a lot of time and practice, but also having a lot of experience in building different components, as CSS frameworks have a lot of magic behind their code, which you probably don’t know how it works if you’re new.
A CSS framework can be a good tool for the right job. If a deadline is short, perhaps that can be good, if you know how to customise it.
There are also different CSS frameworks, Foundation and Bootstrap are the most common, and the most popular out there. There are CSS frameworks such as skeleton, that they don’t really have all this unnecessary styling and it’s pretty straight forward to use it.
Why not use Susy? Susy makes the layout for you. Meaning it’s their math but you can use it. It’s fully flexible, in fact, it’s too flexible so you need to be careful how you use it.
It makes the layout that is fully customisable in real life time. You can set your main grid to be 12, but if you decide that your footer needs to have 16 in total, no problem! Easy to do.
I highly recommend for Susy, if you’re looking at those CSS frameworks just for the grid system – I did before.
What are your thoughts on CSS frameworks? Comment below.