Vanilla CSS and HTML vs Framework

Vanilla CSS and HTML vs Framework
0

#1

Hi everybody.

When building my tribute page and portfolio, I used Bootstrap and Materialize. Frameworks are great for building fast. But should you consider using vanilla HTML and CSS before using frameworks?

Do you learn more HTML and CSS later in the course, or is it expected that you learn that by yourself?


#2

It all depends on your needs. Want a site that loads extremely fast or with a 100/100 on PageSpeed? Dragging in various frameworks to use little bits of their code would be counterproductive in that scenario.


#3

I see. Thanks for the insight. Good to know.


#4

This is not an OR or VS. position.

The truth of the matter is you still need to know CSS/HTML to still use these frameworks effectively.

Because the framework may not be applicable in all cases, and you’ll need to apply another additional class or add another media-query or override a particular scenario. Don’t use the framework as a “crutch” to your lack of CSS/HTML knowledge or understanding.

Frameworks do tend to speed up development time, and keep everything looking consistent in a big project. It’s like a Style Guide. And any cross-browser issues, the ready-made framework has probably solved already. You’re not reinventing the wheel.

And most clients couldn’t care less (i.e. not impressed or whatever) if you used a framework or pure CSS, but they want their website to look good, works in all browsers, works in all mobile browsers, and they don’t want to pay for extra development time and wait long to see their project done, and get a buggy project or inconsistent look/behavior on certain browsers. .


#5

Thanks! I found this post informative.


#6

It also depends on the experience one holds in such things. If you are expert in HTML/CSS and know how to build a web page from scratch and can deal with browser compatibility without affecting the desired results, then it is better to use vanilla HTML/CSS.

In case you need something quick and don’t want to worry about browser compatibility and SEO friendliness of the code, you can use frameworks.


#7

Thank you mpsinghk. I guess SEO friendliness often will be important when making stuff for clients.

I have been using HTML and CSS since 97, so I have a pretty good understanding of it. But I have not been keeping up to date with HTML 5 and CSS 3.

So I guess I should use the Freecodecamp projects as an opportunity to learn it, before relying on frameworks alone.


#8

Thanks owel. Great answer that really makes sense.

In order to use a framework in a really good way, its useful to know why and how things work. Especially if, as you point out, you want to change something.


#9

Most of the questions on here about “this Bootstrap class isn’t working as I expected” arise from a lack of understanding about the underlying CSS. So yes, you need to learn vanilla too, even if you use frameworks.


#10

Thanks for the advice Lionel. That makes sense.


#11

One other thing frameworks largely take care of for you is accessibility (in the a11y sense; aria).


#12

I think the best way to answer this question is a little experiment. Open awwwards.com, check the profile of 3 top all time winners and go to their Web page and see code source, dig into it. Is there angular? react? vue? hardly. Do they even use jquery? IMO the more pro you get the more you appreciate plain JS HTML and CSS. Surely frameworks are helpful but as you go fluent with them you will see drawbacks and think ‘hmm I could have done it better’.And when you do, then you enter a path to become true web-master.


#13

Mmh… some of the works of the most awarded profiles do use jQuery (and a bunch of other frameworks\plugins). The awwards website itself uses it.

I always liked the work of Bürocratik, for example. They use a lot of jQuery (even Wordpress - ew, right?) and they’ve been on awwwards a bunch of times.

I don’t know if that’s really the best way to answer, because it would be like saying that the most beautiful movies\skilled actors\directors are the ones who won some award at Cannes; and for some people that could be the case, while for others not.

It really all comes down to personal preference (and time value). If you know what you are doing, you’ll be able to create a pleasant user experience. Frameworks or not, it doesn’t matter. This should not be a “battle” like @owel said.

Of course this is my opinion and again, of course, to use a framework you’ll need to have an understanding of the vanilla language it’s been created from, but that was already addressed in this thread so I didn’t feel like repeating.


#14

One other thing frameworks largely take care of for you is accessibility (in the a11y sense; aria).

Useful as most developers starting out totally forget about accessibility.


#15

The Site of the day http://themarcus.com/ uses a ton of plugins (and jQuery).

I imagine in most organisations (and in my experience) they will happily go with what a developer wants to use so long as the job gets done on time.

@MichaelHelgesen For the tribute and portfolio which are one page, no need for JS frameworks. This is not what frameworks are designed for. They are more for getting info to the user from different sources or a large Db quickly. See examples of sites using frameworks: https://wappalyzer.com/applications/angularjs
https://wappalyzer.com/applications/react

Unless you are meaning CSS frameworks? In which case I think you can use these from the start but alongside this you should perhaps go through W3Schools CSS/HTML lessons.

(Frameworks is a vague term)


#16

I agree that it all comes down to personal preference. Cannes award methaphore is really cool, but my point was to show work of experienced professionals and that with any frameworks usage it really boils down to fundamentals that you finally need to master anyway. Doesn’t matter if it will be through ‘frameworks’ or not. I prefer minimalist solutions, currently I work with react+redux and i see its only one way of using html, js and css. It is someone’s idea on how to build websites or webapps. It is cool, but its just one way. The same thing with css frameworks like bootstrap or foundation. However in case of css it brings more limitations rather than possibilities. You end up with conflicting classes and unexpected behaviors. IMO better write plain css from beginning of the project - ultimately you are the best expert of your own code. Rather than framework for css I would try with methodology of styling website (like BEM). Thanks for all valuable comments!


#17

Its entirety contextual. A framework will let you protoype site very quickly. It will also allow you to bang out sites [that will look halfway decent] quickly. They provide styling for things that are a pig to style manually (form elements in particular).

From a learning perspective, not understanding the underlying language makes it difficult to debug when issues arise. The framework becomes a series of magical incantations one invokes to make things happen [round about the container-fluid go, in to breakpoint'd rows throw, col-xs and gutters none, &c] rather than a certain way of structuring code in a given language to fulfil a common need. On the flip side, understanding how a framework does what it does by actually reading and understanding [good] framework code, that’s a good use of time.

In practise:

Ex 1: agencies tend to like Bootstrap - their business model is predicated on banging out sites that look good in as short a time period as possible. They need to do that to survive financially. Jamming together a pile of libraries and frameworks is much faster than carefully writing everything by hand.

Ex 2: A successful business that is dependent financially on one application (say an online store) is more likely to want to have a high level of control over all aspects of the design - in that case Bootstrap, though useful at first, starts to get in the way quite quickly.

Ex 3: A government body is likely to have stringent rules surrounding design and accessibility; Bootstrap is not a good fit, because the sites need to be built exactly to specification; it makes more sense to actually convert the spec to HTML structure/styling, to write a framework instead of using an off-the-shelf product.


Note that sites on awwwards et al mostly fall into one of three categories:

  • Agency projects [generally adverts] designed to show off the agency.
  • Personal portfolios of people who want jobs at agencies, and have generally hand coded something nice for their CV [again, adverts].
  • Tech teams [at e.g. Google] who are showing off skills [again, generally adverts].

The agency sites in particular are often explicitly designed to win advertising awards. They’re not necessarily best practice, or useful, or anything more than very, very pretty; whether they use frameworks or not generally has no bearing.


#18

Personally I’m choosing vanilla js and CSS for the time being to fully understand how they work. I’ve been dabbling with Vue.js mostly to make things easier with DOM manipulation, but even then just the bare minimum. You can’t be a carpenter by assembling pre-fabricated furniture. It’s not the best analogy but the point is that I want to fully understand what’s going on under the hood by doing it the hard way first, even if that means taking 3 times the amount of time it would take using a framework to build a web application. Once that’s out of the way I’m all for frameworks and I look forward to using them at their full potential.