Sass

Sass

Application and Data / Languages & Frameworks / CSS Pre-processors / Extensions
react front-end developer at student·
Needs advice
on
BootstrapBootstrapSassSass
and
Tailwind CSSTailwind CSS

Hi all,

I'm learning web development and wanted to know which front-end design frameworks should I use. Currently, I'm learning Bootstrap 5 and was wondering if I should stick with Bootstrap or shift to Sass or Tailwind CSS. Would love to get some advice on the advantages and disadvantages of these frameworks and which one should I stick with. Thanks in advance.

READ MORE
5 upvotes·62K views
Replies (3)
Recommends
on
Tailwind CSS

I would recommend tailwind. Currently, tailwind is pushing best practises and I think they are best to stick with. Bootstrap is loved by some companies, but nowadays I find it pretty clunky. Sass on the other hand is more of an extension for css, to be honest, I fail to find pros of using it. I guess it could work for bigger and highly customizable styling system, but downsides of it like being unable to change it in runtime and need for it being compiled kills development velocity. When I need to do something really wacky and dynamic in CSS, I'll always prefer to use JS/TS for it and also with incoming things like Houdini, I think that's more future proof solution.

READ MORE
6 upvotes·1 comment·22.5K views
Pelorus Technologies
Pelorus Technologies
·
January 23rd 2024 at 7:21AM

I need to do something really wacky and dynamic in CSS, I'll always prefer to use JS/TS for it and also with incoming things like Houdini, I think that's more future proof solution.

·
Reply
Software Engineer ·

Hi Aadam,

So, if you want a straightforward response I'd suggest you to start your learnings with Bootstrap and Sass, but I leave bellow some more reasoning you should be aware of. :)

So, all of them, Bootstrap, Tailwind, Semantic UI and Milligram are solid, well stablished and coherent frontend frameworks, so I'd advise you to choose the one you like the most regarding the look and feel. I'm also adding Semantic UI and Milligram to your list. Keep in mind that the most you know the better will be. :) Plus, when you grasp one, I assure you the next will be way smoother to learn, once you'll have grasped the underlying concepts of frontend element positioning and wireframing, as well as basic component behaviour (like an accordeon, tab selection, complex menu items, etc). Just one FYI, Sass doesn't compare to Bootstrap, Tailwind or Semantic UI. Sass is a, in my opinion, better way to write CSS once you'll do it like your HTML structure, which at the end of the day is more readable.

Bootstrap by all means it's the most used frontend framework worldwide, so if your purpose on learning is to apply for a job, it's more likely to find open positions to work with Bootstrap than any other. Bootstrap, afaik, was the pioneer frontend framework and pretty much all of the others has "borrowed" one or another thing from Bootstrap.

In my opinion, the most difficult thing on all of those frameworks is customization and layouting (the Grid of those systems), so when a designer gives you a Figma (or other wireframing tool) mock so you can reproduce - and that's why you'll need Sass (or pure CSS if you want) to apply some stylesheet rules over the frameworks components (please do this with caution and try as hard as you can not to) - that's where you'll struggle the most, hence the importance of have a good understanding of those frameworks catalogs.

Another thing to keep in mind, this frameworks are not mutually exclusive. This means you can use more than one. For instance, I've seen frontend developers that prefer Bootstrap's Grid System, but like Semantic UI's components more.

So, I think with that you can have a better big picture of those frameworks. :)

Good learning! :D

READ MORE
5 upvotes·1 comment·22.6K views
aadam syed
aadam syed
·
June 10th 2023 at 5:39AM

Hi Giorgio. Thanks for the suggestions. I've been learning Bootstrap 5 and Sass, and have a good understanding of both by now. I'll start learning Milligram and Semantic UI as you suggested and eventually move to Semantic UI React. Thanks again. Here's to learning!!! 🥂

·
Reply
View all (3)
Needs advice
on
ReactReactSvelteSvelte
and
Vue.jsVue.js

I know this is a fairly common question, but I feel like this stuff is pretty dynamic, and things fall in/out of fashion over time.

So here it is: I am an aspiring front-end web developer (eventually full stack, but focused on front-end for the time being). I feel pretty comfortable with HTML5, CSS/Sass, and I know enough JavaScript to get by.

I am an adult student doing the self-teaching route, and while my grasp on vanilla JS isn't stellar, I feel like it would be a good idea to start incorporating a framework into my learning. I just have no idea which to choose. To be honest, Svelte looks the best to me, BUT I am looking to be marketable in the future, so it's probably best to start with a more popular framework.

React seems to be the obvious answer popularity-wise, but I want to hear updated opinions from people in the field. While I haven't completely defined my focus, I like creating UI's and really have fun with CSS/Sass.

Thanks in advance, and I hope you're all having a great and safe weekend.

READ MORE
7 upvotes·122.4K views
Replies (5)
Recommends
on
React
Vue.js
at

I am glad you like Svelte! and I am glad you didn't listed Angular.

I would go with my point of view, if you're considerably new to javascript, I would consider to focus on sharpening those skills. You will need them in order to build anything with those 3 options. You may be surprised how important is to get into the market, so, I would recommend 2 options: * Vue.js has a lot of acceptance nowadays, it's robust enough and ecosystem grows and thrives. Also I consider by my own experience the simplest to learn. Nonetheless, in my experience I don't see vue thriving as much as react. * React.js is the most popular, the one that would probably teach you best javascript and probably for. new learners the least simple to learn. However, once you get it, you would never look back and wonder why you took the decision. React.js is not going anywhere, it would be the option to choose for quite long time. Has wide market acceptance and ecosystem is fantastic.

You could always learn them at the same time tho! It's really up to you! Have fun

READ MORE
10 upvotes·1 comment·445.3K views
ifck dsk
ifck dsk
·
December 11th 2021 at 4:32AM

I am glad you like Svelte! and I am glad you didn't listed Angular.

Why?

·
Reply
Recommends
on
React

While it's hard to recommend any framework/library, I'd recommend you start with something that is relatively popular and has a little more maturity. I recommend react because it is arguably the most popular out of the three, so you'll easily find support, and most importantly, a job with this. Vue is a good second option, and also great to learn. To my knowledge, it was actually created by some of the original devs of React. Not sure if that's actually true or not. On to Svelte. This one is actually really great, and I love the approach they took with doing all of the "dirty work" at compile-time. The problem is that it's relatively new, not as mature, and while you're never guaranteed to find a job with any language/framework, your chances are considerably less.

All of this being said, while I do recommend what to start with, just to get yourself into the industry. My personal recommendation for your future career, and just for fun, is to learn them all.

READ MORE
6 upvotes·1 comment·57.4K views
patrickonparker
patrickonparker
·
September 2nd 2021 at 1:16PM

I started with Vue/Nuxt before I had strong general JS skills. I was forced to learn React for a project and it wasn't hard to pick up after learning Vue. Once you learn one of the major frameworks, you can transfer those skills to the others without too much effort. They're all doing basically the same thing (they're all essentially MVC component libraries) but with different conventions.

React is the most popular right now, despite having the worst DX of the three. For a newcomer, my recommendation would be to either 1) focus on React/Next, and push through the higher learning curve or 2) start with something more comfortable like Vue/Nuxt or Svelte/SvelteKit, then learn React/Next to be more marketable. It won't hurt you to have another library/framework in the skills section of your resume.

This is most important: as a newcomer, whatever library you choose, start with the framework. For Vue, start with Nuxt. For React, start with Next, etc. For me, it was MUCH easier to learn Vue using Nuxt and single file components than it would have been to learn the Vue library by itself.

·
Reply
View all (5)
Needs advice
on
PostCSSPostCSSSassSass
and
StylusStylus

Originally, I was going to start using Sass with Parcel, but then I learned about Stylus, which looked interesting because it can get the property values of something directly instead of through variables, and PostCSS, which looked interesting because you can customize your Pre/Post-processing. Which tool would you recommend?

READ MORE
5 upvotes·345.7K views
Replies (2)
Recommends
on
PostCSS

You're not correct with saying "vs Postcss". You're using Less/Sass/Stylus/... to produce "CSS" (maybe extended means it has some future features) and then in any case PostCSS will play (it is shipped with Parcel/NextJS/CRA/...)

READ MORE
2 upvotes·109.4K views
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
READ MORE
23 upvotes·1 comment·4.7M views
rishabh2712
rishabh2712
·
April 25th 2020 at 6:24AM

Thanks a lot for sharing.

·
Reply