Why use a framework/library the place common CSS will do?

Hello everybody!

So this publish wasn’t what I used to be anticipating to jot down in the present day, however I believe it is vital to sort out, since frameworks and libraries are the most popular factor in CSS proper now and everybody’s both utilizing them or writing them. Myself included, in fact.

There’s quite a lot of discuss which framework or library is the very best, and which one you must use for what mission. All helpful in its personal proper, however not the place I might prefer to take this text. As a substitute, I might prefer to sort out what might be the largest query underlying all of it: Why?

Why must you use a framework or a library the place common CSS will do?

1. Consistency

We might all prefer to suppose that we’re actually nice with protecting issues intact and constant between completely different tasks. I do know I do.

And certain, all of us have sure frequent practices which we develop over time. There are additionally sure finest practices and pointers which many people comply with (ex: BEM).

Nonetheless, one of many lovely issues about being human, is that now we have the capability to alter. Sadly, this capability to alter, additionally comes with a capability to fail. Prefer it or not, we overlook issues.

We overlook naming schemes, we overlook coding types, we overlook finest practices, we overlook accessibility pointers, and a lot extra. That is the place a framework or library can take some ache out of our course of.

Frameworks and libraries not solely present reusable types, however preserve sure underlying selections constant, even when we’re producing vastly completely different designs every time. This has advantages each for you, the designer, and customers.

2. Id

Identity Image

One of the vital points of design can also be one of the crucial delicate. It is that extremely controversial phrase, id. However no, I am not being political right here, haha!

Slightly, by id, I am referring to the presence of constant, notable, recognizable markers that exist throughout a number of designs. Every designer has a design id, and it’s completely different from a “model”, although it’s normally seen inside your particular person branding.

Through the use of (a) framework(s)/library(s) to take care of consistency, you additionally acquire the good thing about a notable id, inside your designs. It is price mentioning right here that you just don’t must depend on a 3rd social gathering for this, both. You’ll be able to construct your personal, in-house CSS and reuse it throughout merchandise in the identical method. That is in reality what number of frameworks and libraries are born.

3. Streamlining

Streamlining Image

That is in all probability #1 cause why many designers and groups select to make use of standard CSS frameworks and libraries of their development course of. It simply makes the entire deal a lot simpler!

Slightly than having a patchwork of various options from completely different authors with completely different concepts and completely different approaches to unravel completely different issues (dang, that is exhausting)…

…you get a pre-defined, reusable set of instruments, or building-blocks, to place it in a different way. See what I did there, by the way in which? I used “completely different” like a category. Okay, you must admit that was not less than barely humorous.

On a severe be aware, a poorly optimized development course of can value you each money and time, even when the areas the place you lack optimization usually are not instantly apparent. Design, and particularly the implementation of design via CSS, is a kind of important areas. Each designers and non-designers alike, generally tend to underestimate not solely the significance, however the weight behind CSS. It may be difficult to get it proper, and even when not performed unsuitable, it will probably take up a good portion of your time.

Frameworks and libraries can alleviate a number of the challenges concerned with CSS development/design, particularly when rigorously chosen to swimsuit the mission at hand. The truth is, even a poorly written framework/library can expose a number of the beforehand hidden or difficult-to-determine gaps in your design course of.

4. Ease of ‘onboarding’

Onboarding Image

One other vital profit to utilizing frameworks and libraries will not be all the time to be discovered inside these instruments themselves. Name it a meta-benefit, if you’ll.

Each time we method one thing new, there is a time period inside which we should get to study it earlier than we will use it. Typically, this time interval is tremendous brief, a lot so, that we do not even discover it! You would possibly hear somebody say:

“Oh, I received it straight away!”

Actuality is, they did not — not if that one thing was new to them. Nonetheless, the time interval required for studying its technique of operation, was shortened, doubtless as a result of that ‘one thing,’ or some facet of that ‘one thing,’ was already acquainted to them.

We normally consult with the hassle expended between discovery and ‘operable mastery’ as “The Learning Curve“.

With most frameworks and libraries, this ‘studying curve’ is each shortened and flattened by the existence of fine (sufficient) documentation. When working with a brand new mission from scratch, you are not solely chargeable for implementing no matter design(s) you could have in thoughts, however for figuring out — as a lot because it depends upon you — the expertise others may have when working together with your code or design.

In a crew, this change into particularly vital. As a rule, nobody has the time to put money into asking or answering questions on how stuff works, and each new query requires a point of sacrifice. This will particularly lower into the expertise new crew members have when ‘onboarding’ — ie: attending to know their manner across the crew’s workflow and codebase.

Through the use of (a) library/framework to deal with your CSS code, you’ll be able to cut back the friction of this course of, offered that you just’re working with one thing effectively documented, internally constant, and naturally – ‘battle examined’. These issues matter too.

5. Studying

Learning Image

For my remaining cause, I’ll contact somewhat on studying, particularly seeing as this was my expertise once I was first studying CSS in depth. Though I might performed web design for years (principally utilizing WYSIWYG editors) and touched CSS right here and there, my actual deep dive into CSS got here once I began constructing web sites with Bootstrap 3. Having considerably restricted understanding (on the time) of the inside workings of CSS, I spent most of my time wrangling (and getting annoyed) with the offered courses.

In time, this led me to dig deeper, to start out trying “underneath the hood” and determining why sure courses behaved in the way in which they did. I spent quite a lot of time within the inspector, or digging via the supply code, and it led to me writing an intensive (even when misled) file known as “fixes.css”. I might find yourself reusing this in a number of tasks, till I ultimately repurposed it and realized that it had change into its personal framework!

I share all that to say this: utilizing another person’s work could be the means to studying the right way to create your personal, even whether it is via frustration with the quirks in theirs!

Even with out encountering quirks and frustrations, you’ll be able to study fairly a bit from utilizing and exploring varied frameworks and libraries. Finally, you will end up changing into way more agile and comfy, and you will be higher at writing from scratch in these instances that you just want, or just select to.

In conclusion:

These are only a few of the various the reason why you would possibly select to make use of a CSS framework or library over writing your personal code from scratch, however I am certain there are numerous different causes you’ll be able to determine by yourself.

You’ll be able to look out for a follow-up publish from me a while sooner or later, taking a look at some the reason why you might not need to use a library or framework, however reasonably construct by yourself. Ought to be enjoyable!

Within the meantime:

  • What are your favorite libraries and frameworks?
  • What causes do you’ve gotten for/towards utilizing them?
  • Have you ever written any your self?

I might love to listen to from you, so do not be afraid to answer!

See you subsequent time!

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#frameworklibrary #common #CSS