Everyone Uses CSS Frameworks

medium.com medium.com3 years ago in #Dev Love110

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. Type scale as set in the CodyHouse Framework 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):…

Like to keep reading?

This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply