Anytime the “what’s your favorite CSS framework” question pops up, you read the same comments: a bunch of developers expressing their love for framework X or Y, and others stating they don’t use frameworks.
Some of the reasons why some developers say they don’t use CSS frameworks:
- Frameworks are opinionated.
- Why would I need a framework when I can write clean CSS myself?
- Frameworks are bloated with stuff I don’t need.
But what is a framework, exactly?
A framework is a supporting structure around which something can be built.
A framework doesn’t need to be opinionated. Its CSS can be as clean as yours (or it could literally be yours). It can be super slim, to the point where it includes only a bunch of reusable rules.
If you do one of the following, you’re using a framework even if you say you don’t:
- You have a bunch of utility classes that you copy and paste from project to project.
- You have a set of basic rules (e.g., for typography and spacing) that you copy into new projects, and then tweak to accommodate different needs.
- You have a boilerplate for the style of buttons and forms that is easy to customize.
- In general, in any case where you reuse something across different projects.
There’s only one case when you can say you don’t use a CSS framework, and it’s the truth: if you start a project with your CSS files completely blank.
But seriously, why would you do that? ?
I know I’m being pedantic. “When I say I don’t use a CSS framework, I’m referring to Bootstrap, not 20 lines of code!”, I hear you scream. However, I think there’s a misleading message that is delivered to young developers: “Frameworks are bad. If you were a good developer, you’d write clean CSS from scratch”. And yet millions of developers download Bootstrap every month. Are they all making a mistake? Not at all.
You could use a super slim framework or create one yourself, and it would be fine. You could use a heavier framework or create one yourself, and it would be fine.
Starting from (literally) scratch every time does not prove you’re a good developer.
Let me walk you through the main problems a framework helps you solve and why we all need one.
When Claudia and I started working on the CodyHouse Components project (a library of HTML, CSS, JS web components), we soon realized how important it is to have global styles and abstract rules.
A global style is a rule that, when modified, affects all the components it crosses (e.g., a buttons.scss file where you store the style of your buttons).
A CSS abstraction is a rule that gives the same result regardless of the element it is applied to (e.g., utility classes).
Global styles make your project customizable. For example, if you create a reusable typography.scss file where you define the type scale, you can 1) edit the type scale and affect all the components of your current project or 2) set a custom type scale for your next project.
CSS abstractions make it easier to create component variations without the headaches caused by naming things. For example, imagine you create a new component. If you want to create two class modifiers where the text is aligned in the center or right, you end up doing the following:
Then you create another component and have the same ‘issue’. Once again, you create two new class modifiers:
An alternative approach would be creating 3 utility classes (abstractions):
Now you can have infinite components and apply the same utility classes to align text.
I’m not suggesting you should create utility classes for everything (even though some frameworks do so, and developers love them). Find your own balance, create the abstractions you need.
If you come up with a pattern that works, why wouldn’t you extend it to new projects (and include it in your framework)? For example, you start working on accessibility and soon realize how handy it is the .sr-only
utility class:
Is there any reason why you shouldn’t use it in all your projects? Nope.
Opening up an old CSS project is a pain; we all know that. However, it doesn’t need to be THAT painful. Using the same framework across multiple projects means working with patterns you’re already familiar with. If you use the same mixins, global settings, grid rules, and utility classes, you’ll need less time figuring out how to do stuff.
For example, let’s imagine you have created a scale of spacing values:
You know you can go ahead and modify a component using one of the scale values:
The spacing values may vary in different projects, but the way you apply them is the same. You go ahead and set padding: var(--space-md)
. If it’s too small/big, you can pick another value (or edit the scale).
The alternative approach would be:
- First, figure out how spacing rules were set when the project was initiated.
- Then, apply the spacing rules.
That extra step makes all the difference in the world. It’s where the frustration lies: figuring out things when you, or someone else you work with, already went through that process before.
Frameworks evolve and get updated (e.g., when you learn new patterns and replace old ones). There will be cases when you still need to remember how/why some rules were set in the first place. It sucks, but working with reusable patterns (framework) means reducing the number of times this happens.
One more advantage of creating your own framework is learning to identify reusable patterns. You find that piece of your CSS puzzle that could work across multiple projects, and decide to store it in a safe place (your framework).
Or, you can learn from frameworks created by other developers. Question why that rule was abstracted. If you can’t come up with an answer, google it; or ask the author.
The process of questioning what you do and discovering the mechanics behind a decision is what makes you learn. Not the assumption that you have to come up with all the solutions yourself.
A CSS framework is a tool. It’s not good or bad, and it doesn’t define you as a developer. When you find a pattern that works, save it. If you find a framework that ticks all your boxes, use it. As long as you learn in the process, nothing bad comes from using it. Quite the opposite.
If you’re looking for a lightweight front-end framework for building accessible, bespoke interfaces, check out CodyHouse!
19 comments
tadalafil dosage bodybuilding cialis pills sublingual tadalafil
I’m not that much of a online reader to be honest but your sites really nice, keep
it up! I’ll go ahead and bookmark your site to come back down the road.
Cheers
Hi, I do believe this is a great blog. I stumbledupon it 😉 I will come back yet again since i have bookmarked it.
Money and freedom is the greatest way to change, may you be rich and continue to help other people.
Wonderful web site. A lot of useful info here. I am sending it to some friends ans also sharing in delicious.
And obviously, thanks for your effort!
Awesome blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple adjustements would really make my blog shine.
Please let me know where you got your design. Appreciate it
Hi there, just wanted to say, I liked this post.
It was inspiring. Keep on posting!
We are a group of volunteers and starting a new scheme in our community.
Your site offered us with valuable information to work on. You’ve done
an impressive job and our entire community will be grateful to you.
I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup?
I’m assuming having a blog like yours would cost a pretty penny?
I’m not very web smart so I’m not 100% sure.
Any suggestions or advice would be greatly appreciated.
Thank you
I was excited to find this web site. I want to to
thank you for ones time just for this fantastic read!! I definitely enjoyed every little bit of it and
i also have you bookmarked to check out new things on your
website.
Hello, I desire to subscribe for this webpage to obtain hottest updates, therefore where can i do it please
assist.
What’s up it’s me, I am also visiting this site on a regular basis, this site is really fastidious
and the visitors are in fact sharing good thoughts. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr
This is my first time visit at here and i am truly impressed to read all at
single place. quest bars http://j.mp/3C2tkMR quest bars
You really make it seem so easy with your presentation but I find this matter to be actually something which I
think I would never understand. It seems too complex and extremely broad
for me. I am looking forward for your next post, I will try to get the
hang of it! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery
Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your webpage?
My blog site is in the exact same area of interest as yours and my users would certainly benefit from some of the information you present here.
Please let me know if this alright with you. Thanks!
scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery
It’s actually very complex in this full of activity life to listen news on TV, thus I just use internet
for that purpose, and take the most recent news.
cheap flights http://1704milesapart.tumblr.com/ cheap flights
Thanks for ones marvelous posting! I quite enjoyed reading it, you’re a great author.
I will ensure that I bookmark your blog and will come
back someday. I want to encourage you continue your great
writing, have a nice day! quest bars https://www.iherb.com/search?kw=quest%20bars quest bars
I used to be able to find good advice from your content.
Incredible points. Outstanding arguments. Keep up the great spirit.
I think this is one of the most significant info for me.
And i’m glad reading your article. But should remark
on few general things, The website style is wonderful, the articles is really excellent
: D. Good job, cheers