Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?

[@WORDGASM]

God bless you. Came from reading boring Wikipedia page and articles to this video. You are 1000X better at explaining what Bootstrap is. 👍

[@andgordy4120]

Tailwind is really great for prototyping, that is when you want to try different styles on the go, and don't want to write all the css manually. First, it saves your time without limiting your styling options too much, like Bootstrap does. Second, you can learn a lot from the Tailwind classes you used throughout the prototyping phase and define correct patterns for your own styles, so when the time comes to create your own “btn” and “btn-primary” you'll know better what goes where for the particular project.

[@agniwebdev774]

This is very helpful. Thank you.

[@BrasilEmFatos]

Agreed. But also, you can try to learn css best practices of naming things such as BEM. Understand how to organize your css files or if you should use a pre processor as Sass would be a great call too, because in the end of the day frameworks as Tailwind does it for us behind the scene

[@jfordgaming9615]

That is true, I learned css because of tailwind specially the layout, because its docs and cheat sheet.

[@msgesus4518]

@@BrasilEmFatos This guy knows what's up. Tailwind is a crutch on larger projects, learn the basics and BEM and you will be on another level.

[@richardramos7267]

I love using vanilla CSS, I just love seeing how things, styling are done at the core level, of course that is only for me, framework are great, it makes job done much faster.

[@academind]

I totally agree Richard. It's good to know that we have other ways like frameworks to create our styling but in the end everybody should use the tools he prefers.

[@luckybairagi7294]

Even I like Vanilla CSS because it is more flexible for me to create design in Vanilla. I don't know about other.

[@Landofalcon007]

Dammit Max, I'm an Engineer, not an artist! Now gimme the bootstrap.

[@messycode7738]

lol

[@kladdelic]

Tailwind with SCSS during building and PurgeCSS for the production step here. It is a thing directly between pure CSS a s Bootstrap for me. At first I was kind of opposed to using it after a short test. But after watching Adam Wathan and Jeffrey Way creating with it, I gave it another shot, and it's now my go to tool. The option to extract commonly used components is just one of the coolest things I encountered in recent years.

[@burak2423]

Kladdelic I completely agree with you, I wanted to say exact same things thank you

[@911madza]

still in 2020?

[@hippiejosh63]

Glad you've been doing videos over style/CSS, it's something so easy to overlook or otherwise screw up.

[@academind]

Happy to read that you like these videos Josh. I also think that styling websites is definitely an important topic, that's why we wanted to add content in this area here on the channel and on Udemy.

[@baybay1234]

I use vanilla css for all my projects. It is time consuming but i prefer the freedom to create my own style sheet and keep my markup clean.

[@academind]

Definitely a fine approach, it always depends on the personal preferences/needs. But if you want to have the highest level of customization options and the entire control of your code, vanilla CSS in the end the only solution for that.

[@craigjones21]

Sniperyork, did you look at tailwind in-depth? It allows you to compose your own styles from theirs plus your own simply using the @apply keyword. So your markup would stay clean while more compact than vanilla. Another thing I loved is you can indicate screen size for responsiveness in-line with your css or theirs.

[@alexmachin1785]

You can just import the parts you need from bootstrap and only use that leading to a less bulky outcome. I use scss with custom CSS and Bootstrap and it's great.

[@HarfangX]

Same here. I don’t even use preprocessors for the majority of them. My sites don’t have codes I don’t use. It’s all semantic and light. I find this approach forces you to be organized and use proper cascading styles. It might be longer but not that much when you re-use design patterns. I’m the same way with my JavaScript. I keep it vanilla and will only use libraries that have no dependencies.

[@humanyoda]

@@craigjones21 @apply keyword isn't supported by browsers. It's been abandoned.

[@laxusmcfury]

well explained, thank you! i work with Vanilla CSS and i heard about Bootstrap many times, and ignored it because i thought it's another language that if i want to use it i have to learn it, now i know what it is and i know it's not something i want to use because i prefer to style on my own

[@craigjones21]

Thanks for making this video - the timing was perfect for me as I am about to upgrade the appearance of a client's site that was using vanilla css. I really like the flexibility and power of using a utility css like tailwind! Am definitely going to use it.

[@academind]

Great to hear that, thanks for your very nice feedback! :)

[@alexmachin1785]

I personally use snippets of bootstrap by importing only the components I need , the rest it custom code. It's a nice balance between rapid and efficient development. I typically use bootstrap for the grid, modal and menu system.

[@zoeliam898]

this is really helpful! I'm a CS and one of the few in my cohort with little prior experience. This really helped me get up to speed!

[@academind]

That's great to read Zoe, thank you for your awesome feedback!

[@levonorrr]

The very best explanation that I found about differences between Boostrap and Tailwind.... Good video I like it... Sorry for my english btw... Best Regards from Venezuela.

[@academind]

Thanks so much for your fantastic feedback Ernesto, this honestly means a lot to me!

[@dorf2618]

I think this video misunderstands Tailwind's strengths and weaknesses in common practice. First, pretty much everyone who uses Tailwind in production also uses PurgeCSS to remove unused code/classes. This is such a common thing that the Tailwind people put the PurgeCSS set-up instructions in their own docs. Second, you do have a lot of control with Tailwind because every class is easily customized, you can easily add your own Tailwind-ed classes, etc. But with that said, some lack of control in Tailwind is intended because it's a tool for creating design systems. Having only nine shades of blue or only ten padding options is the whole point. This kind of limited, curated set of choices helps you create fast, cohesive, consistent designs across your site. Third, I would argue against the idea that no expert knowledge of CSS is needed to use Tailwind. For example, one of Tailwind's greatest strengths is how it handles responsive breakpoints, but I think it would be difficult to use these classes well without in-depth understanding of CSS media queries. Tailwind is weird in that you write no CSS but probably need to know a lot about CSS to use it effectively.

[@gunman1188]

agreed

[@cas4425]

Tailwind is garbage imo

[@nasukeuchiha7884]

@@cas4425 why?

[@charbmrad2192]

why does w3c css validation doesn't validate tailwind

[@mojtabasadegian8742]

thank you man from iran this is one of the best videos i have ever seen for comparing these tnx a lot!

[@msgesus4518]

CSS / SCSS, DIY! I remember back in the day on small projects bootstrap would be good to just leverage for it's grid system, but now with modern CSS with CSS grid it's so easy to do those layouts. Set up your own variables: font sizes, spacing, breakpoints, colours. Then make some basic re-usable components, buttons, forms, info boxes, toast messages, modals, and you will have learnt so much more than using a library and you won't have to fight it with any overrides.

[@centurion3708]

I love component based frameworks like react material ui, for a backend guy like me, these things are god sent

[@itisconsulting]

Great video I wrote my own utility stuff forever but this looks really good thanks for introducing the tail wind CSS utility library.

[@academind]

Thanks a lot Bill!

[@angelramosexperience8698]

Amazing breakdown I am used to building all my classes from scratch, I am a control freak lol so I am not sure if using any of this would be fun for me but seems very useful

[@jpm8288]

I recently tried to use Tailwind for a project and I found it to be useful in some instances, and cumbersome at time. Most of the time, I feel that there are so many classes that you aren't saving time from learning CSS. Also, when the framework's default settings need to be tweaked to fit your design, you spend more time finding out how to make the changes. In all, I felt that most CSS frameworks just aren't that useful once you know vanilla CSS pretty well.

[@LuminousWhispers11]

Yeah, I found myself wanting to speed through the project as I did with Bootstrap. Plus, for the most part I used my own colors. So, I am just going to use Sass from now on and refine my knowledge on CSS.

[@jesseschoonveld7706]

Tailwind is mostly useful for component based approaches like react/vue/angular imo. The amount of classes really doesn't bother me when everything is cut up in smaller pieces. Saves me so much time coming up with class names, going into the css/sass files.

[@sandeshyad]

Good video, very comprehensive. I became a fan. Just wanted to add a point. A major benefit of bootstrap is its responsive feature. The ready made media queries are great.

[@gessegoncalves6493]

Tailwind make It better

[@Amabhijeetmane]

Hi Max...You are gr8 tutor. I bought almost all of your courses. I bought CSS course just to understand positions in detail. I hope, it will help me to overcome my fear of using positions.

[@academind]

Thanks a lot for sharing this great feedback, happy to have you on board of the CSS course! We tried our best to create a really comprehensive course, so I think that positioning and also other CSS topics should be a lot clearer after the course :)

[@seanraz]

I used Bootstrap on many projects back in the day. It worked well enough. But, with CSS GRID, and FLEXBOX, I feel like the time spent to learn a framework would be better spent just learning Vanilla CSS. For most websites, there aren't that many classes that need to be written. Class names can be more meaningful. It's actually simpler than using a framework! The hardest thing is probably doing your first responsive navbar in pure css. After that, it is easier to keep clients happy and on-brand, and to maintain the projects. But, I'm a one-man shop. The use-case that I think makes more sense for a framework would be on a big team of developers with various abilities and backgrounds. Having a standard "way of doing things" could be helpful. Otherwise, seems like more trouble than it's worth.

[@archangel0137]

Agreed 💯. With Flexbox and CSS Grid, CSS frameworks aren't necessary any more unless you work in a company where you're asked to use one. Learning a framework takes time and you're limited in how you can customise it. That's why I stopped using Bootstrap and began writing my own code from scratch. All that time is better spent mastering CSS and using a preprocessor like SASS. Building your OWN custom components is damn hard work but immensely rewarding. Your CSS skills will really go through the roof and your websites will really stand out from the crowd and look original. I want to be a freelance web developer and have been learning Flexbox and CSS Grid over the last few months. Yes, building a responsive navbar is the most difficult which is why I'm doing it first. It should get easier after. Custom CSS is the way to go!

[@stephenkimotho752]

I prefer vanilla css. Once you get hold of it, you enjoy it and u r in control. You can also design unique wesbites faster after more practice. I prefer to learn something that can never be taen away from you. Frameworks come and go but a language will live to remain

[@yoyo-yx1qx]

totally agree with you mahn

[@paardensikkeneur7001]

On important point to note is that the co-creator Steve Schoger of Tailwind is one of the best UI/UX designers I have come across. His twitter tips on good design practices are absolutely solid gold, as is his book, Refactoring UI. To have a CSS framework made by such a knowledgeable guy is a BIG pro. I would argue that using tailwind to learn good design practices, is worth the effort alone. You can always then move on to custom CSS armed with this knowledge.

[@maxwellopio2187]

I love your explanation sir. This is the video i have been looking for. Thank you! for the effort.

[@onnewf9288]

great explanation ! i'm currently using bootstrap, but will learn more about tailwind because your video, thanks 👍

[@alexandergilbertson9539]

I'm still new to CSS. I have just started messing around with Tailwind. But I noticed You can use Tailwind CSS IntelliSense on Visual Studio Code to help speed up the process.

[@islamic6037]

but if your basics are good you can master any thing.

[@djordjek3916]

Vanilla CSS. Learn Flexbox and CSS Grid and you won't need any framework to built any layout, and you will have full control.

[@joeldcanfield_spinhead]

It's rare to see a comparison video that doesn't shoehorn in a preconceived "right" answer. I came here specifically to see if Tailwind was right for me, and now I'm convinced that continuing with vanilla CSS like I've done for 20+ years is the best choice for me.

[@druharper]

4 years later Tailwind is very popular. Interesting to see this video 4 years later to see how much has changed. Tailwind is so good at whipping up a quick website. No more thinking of names for classes. CSS file is tiny.

[@GeorgesMayrink]

Hello, Max. Thank you for another excellent useful video. If you ever consider doing an update of this clip, may I suggest you make a brief comparison of final css size amongst the choices? It is obvious that writing your own css gives you the smallest code (unless you write spaghetti code) but what would be the real price to pay for the convenience of using Bootstrap or TailWind? And does it even matter considering download speeds most have nowadays? That tidbit would be useful for those watching. 👍🏽

[@franciscofuentes8916]

I always assumed I had to do everything by myself so I used vanilla css (not knowing people called it "vanilla") and started using bootstrap (it does save you time when you're doing a job or homework and you don't wanna care about CSS at ALL) but Tailwind sounds great even though it looks like you're moving CSS from the stylesheet to HTML xD.

[@techstacker5361]

To me, the main advantage of single-purpose classes (utilities, like Tailwind) is that it removes the need for making decisions about how to name things. This gives you more time to focus on the actual styling. And, of course, the fact that you can reuse the code in all of your projects. For reusability, you only have to change the variable/settings layer (Single Source of Truth) for important branding elements like typography and colors to make each project look unique and align with the company’s brand identity. It’s not perfect, and it will make your markup look bloated, but the complexity always has to go somewhere, it’s up for you to decide if it should be in the CSS stylesheets or the HTML.

[@bibibobs]

"...removes the need for making decisions about how to name things" This is not true, you should extract the reusable components otherwise your project will become a giant mess

[@arindam1249]

Very very amazing video, exactly what I needed

[@Dloc47]

Thanks for the explanation with awesome colors and code

[@jamesbest2221]

Awesome as always Max, thanks! (I bought the course!)

[@academind]

Thank you so much for your comment and for your support James, this really means a lot to me!

[@স্বচ্ছনিরবতা]

Thanks for the comparison, very helpful I think I will go with bootstrap as I don't have much time for writing so much css my own

[@zainraad7862]

Thank you, that was informative!

[@TheVioArtsofficial]

Hello guys, Im really not sure if this section is the right one but nvm. Actually I develope a React App with NextJS and I use MaterialUI + vanilla css. My Problem: my pagespeed on mobile device is swinging around 88 to 97. I recognized that I really dont need mat ui coz I just use it for Grids…sooo Yeah! My question: The most important thing is, that the pagespeed should fast as possible… Which CSS would you use for ? • vanillaCSS or • tailwindCSS ? Thanks for all replies ❤️

[@terraflops]

Tailwind CSS looks cool, I worked with Bootstrap before but it's not my favorite

[@alexmachin1785]

Great video max just like your courses. I personally use SASS to import bootstrap components but i mostly use my own styling its much easier.

[@somascope1834]

I think there are additional perspectives to consider, too. Although the utility frameworks do indeed add a lot of character bloat to HTML (making traditional coders think, "Yuck!"), they do provide a different kind of abstraction that some people might lean towards. Ideas that might gravitate a person or team to using utility CSS might be: You are designing modular systems, developing components using a JavaScript framework, which will certainly use some sort of templating engine. At this point, you may still be adding several classes to style a button, but you do so once for that button component; it may get rendered in the DOM hundreds of times by Vue, React, Angular, whatever, but your template only had you code that once. I also think that it's a bit of a paradigm shift - a new way of approaching code-oriented design. The front-end community has been going through these shifts for years now, and will continue to do so. Remember when most people react strongly towards CSS in JS? I'm not actually making a case for utility CSS (I've never used it) but I can understand why some might choose it for certain projects. If you are using some templating engine, take it on! If not, think twice.

[@academind]

Thanks a lot for sharing your opinion -very interesting to read that!

[@jsiszero]

Sometimes there comes a point where you are too reliant on a framework when simple CSS will do. In real-life applications, apps have customized designs that can turn really bloated code-wise because you're overwriting all of these Bootstrap styles, when it is easier and more efficient to just start from scratch.

[@RahulMishra-mt3cv]

It was a very good video, I think you explained everything in the best way possible 👍👌

[@jyst83]

Tailwind FTW - In teams everyone tends to write vanilla css differently, class naming consistency is super useful, it's very DRY being utility based, + gives you full control over the visual aspects on your code far beyond Bootcrap. Choose to extract anything into your own components using @apply. Remove any unused code using PurgeCSS .. Basically for any larger project it kills anything else out there..

[@muhdbasiirzulkifle5090]

Thank you for the video!

[@raduseserman6550]

Thank you, very helpful video for me.

[@jefersonbronze]

Excellent Explanation!

[@tino3420]

This only talks about styling, component frameworks also include component behaviors such as modal or tabs. Building with tailwind or vanalla css, you also need to write all the behavior codes.

[@mandaputtra]

Hmmm, actually we can extends tailwind css settings. and purgecss to delete the class we dont need. Now I'm fan of tailwind. and i just use plain css/postcss because they had the magic syntax with @, pretty usefull though if you want to make styled components. Tailwind are still in beta but adam wathan video on tailwind make me amaze and i just use it.

[@abedt3225]

Thanks for this great video..vanilla CSS is the way to go pro!

[@saqibbilal9267]

Great overview still in September 2022

[@yuriykazmirchuk9641]

Excellent explanation, thanks a lot for the video!

[@AveN7ers]

SASS is the way to go.

[@Dubov1933]

Very good vid, everything was explained nicely

[@Maz.V.P]

perfect video and explanation for a beginner, thank you

[@beastboy..]

hey dude you explained it very well 👍👍👍

[@Explore2Adore]

I imagine vanilla CSS is best. Frameworks would lose speed advantage if you have to lookup the relevant class reference, but then i am still new to web design. Great CSS course, i am halfway through CSS Grid 🙂👍

[@axr4305]

well explained and well made video. thank you!

[@geneanthony3421]

Zurb Foundation is one that gets forgotten about. It's a bit like Bootstrap but far more control over the control look.

[@Tomanoppy]

Great video and really helped me understand. Thank you.

[@humanyoda]

To download less of Bootstrap's files, you could simply download what you want, e.g. a file for buttons if that's all you need.

[@911madza]

SASS + GRID = unlimited power

[@LofiWurld]

Don't forget flex

[@Seekerish]

@@LofiWurld grid is essentially flex

[@pcg4mer427]

@@Seekerish no flex is other thing grid is other thing. grid is not yet fully supported by some browsers

[@TheNini666]

@@pcg4mer427 please, go and forget ie...

[@kubakakauko]

@@pcg4mer427 It is

[@MarieAmeliaFreyaAster]

I mean I did my website with just HTML & inline CSS :p pure Vanilla and it's under 1 kilobyte, just wanted to do some sort of code golfing it looks more like a modern business card, but it includes my font of choice, is friendly for disabled people and even supports IE 😄 took me like 3 days to really cramp it down, customize it and making it perfect

[@mrksssdev6089]

very nice!! great video! thanks bro!

[@xEqualsRandom]

Correct me if I'm wrong, but shouldn't you keep the outline for accessibility purposes?

[@AlJey007]

1. you can import only the parts of bootstrap you need 2. it is very highly customizable with sass variables

[@academind]

I do mention that in the video and still it's not how most people use it. You can customize pretty much every framework, that is of course correct.

[@warchild2726]

if you are gonna customize bootstrap with sass just write your own css, it will take less time i guess

[@lgorog_1]

Toko Goshadze That's not true. Bootstrap 4.0 is written in SASS and the developers added a lot of SASS variables which can be overriden. That means you can change the color scheme, default paddings, font-size, etc. This way you can save a lot of time. This come with a cost which is you have to compile your own css so you can't use the default CDN.

[@GameGourmand]

He's talking about directly use. Of course you can take some examples from frameworks :)

[@dialatedmcd]

Yeah I just take whatever I like from a bootstrap, say the form style, and copy and paste it into my styles.css

[@wasimraja2980]

well, you're wrong about one disadvantage of tailwind. Tailwind doesn't have unnecessary overhead code. They claim that if any code is not being used in the project it automatically gets removed from the codebase.

[@jjsiegal1]

What over-head code are you referring to ?

[@_ankit_]

in tailwind I would say you must be an expert of css to get it work. Without knowing how css works you cant do anything with tailwind and actually vanilla css gives u much more flexibility without being and expert you would be able to get your work done but I dont think possible with tailwind.

[@pequod4557]

Nothing beats writing your own CSS, primarily when things work as intended.

[@jimbosupernova]

Thank you for clearing up some of the confusion. I've learnt to code vanilla css and always wondered if a framework is worthwhile. I think I'm going to keep plugging away with vanilla to keep getting better! 😄😄

[@academind]

Happy to read that the video was helpful James, thank you!

[@the21podcast]

Thanks a lot man very well explained

[@pjguitar15]

I use both CSS and Bootstrap. Bootstrap might be limited but with CSS, you can get more control with it

[@dragtr0n]

I think bootstrap is good for responsive layouts, then added with tailwind for quick styling is a cherry on top.

[@pellegrinoernesto]

at 0:43 seconds I subbed.

[@academind]

Thank you :)

[@vgxezo7371]

Tailwind classes that are unused can be purged if configured correctly you can find the information their docs. I personally learned css and scss then transitioned to tailwind.

[@brawndo8726]

There's a fourth option which is never discussed: .my-button { @extend .btn; @extend .btn-primary; } This effectively decouples your application from third party frameworks and lays the foundation (pun intended) for developing your own custom styles. Another benefit is that it keeps the HTML a little more sane. HTML is for structure, not style. Adding 20 class names to an HTML element is just one step removed from the old days of inline styling. I know that's an odd statement in 2019 when frameworks like React actively encourage people to inject code into `style` attributes, but I disagree with that as well. I get the impression many modern tools like React and Bootstrap were written by backend developers that wanted control over the frontend. In my opinion, the conventions implemented by Vue.js, specifically their single-file-components, offers a glimpse of salvation for the often forgotten separation of concerns. I should just write an article about this... The world needs to know we're going down a dark path.

[@brawndo8726]

@Academind - Article Written: The “Backendification” of Frontend Development medium.com/@mktlr/the-backendification-of-frontend-development-62f218a773d4

[@astev52]

I agree with alot of what you've said, 99% of the back-end developers I've worked with have no interest in the design aspect of things, and have little respect for it, which extends to CSS. Bootstrap for them is their go to. It seems to me that CSS get's treated as being unimportant and trivial by people learning front-end development, when IMO at least, it's very important. When you think about it, it's the foundation of you're web app, and there's significant value in being able to write clean easily extensible CSS code from the get go.

[@TarikHamilton]

The inline style trend in React is overblown. I don't really see it promoted; mostly just styled-components which still uses CSS classes. I use SCSS and CSS modules in React.

[@lgorog_1]

Bootstrap 4.0 is very different from previous versions and I think you did not checked out the new features. They introduced utility classes (eg.: bg-primary, mb-4). They also added a lot of customization option with the use of SASS as they added a lot of overrideable SASS variables. Lastly you can import only part of the library which means less "Unecessary Overhead Code".

[@academind]

I did, no worries. It still primarily is a component framework. I do mention that you can customize it in the video and still, this is not how most people use it. With the CDN link, you got the entire framework - and the reality is, that this is one of the main ways many people use it. That's not even bad per se, it's just something to consider

[@lgorog_1]

Academind Correct me if I'm wrong but when you compare technologies you should cover the full capabilities of them not just the part "most people use". This way more and more people can understand the potential in them.

[@LppDelta9]

Hello Find and Replace, loll well, I prefer to write my own CSS, so when I decide to change some padding (or else) I don't have to change all the class everywhere also with Bootstrap, I found myself overwriting what Bootstrap introduce Bootstrap was developed for prototyping, and probably should still only use for that...

[@fitnesshacker_]

Thank you! My choice is the vanilla CSS )

[@francislambert5189]

Love Vanilla.

[@arcariusmexen1104]

Where would you place Sass in your workflow?

[@aseemsharan]

13:40 summarises it all

[@ezadviper]

Be good at CSS Grid and Tailwind probably the best way to go

[@bhagabatiprasad2612]

But having knowledge of Bootstrap and Tailwind Css, makes you dynamic and makes your client happy.

[@t4eddybear645]

I am thinking.. it could be better spending my energy for css if I will learn more code . But bootstrap is oke for easy code and very fast. So learning tailwind library terms did not seems to me fine. Beside of that I am thinking bootstrap will follow the way of tailwind in the future. Have to be

[@hyfydistro]

I would use vanilla CSS for production and Bootstrap for development stages. I'm not sure how to go about Tailwind. When would I use Tailwind?

[@RedStone576]

now

tailwind ftw. custimizable easier than any other framworks, using purge css to remove unused stuff etc. this makes life a lot easier and i think instructors should use it in their courses instead of bootsrap. When you use bootstrap in your courses chances are the students watching it a year later will have problems to follow along because the versions, classes changed. Personally i like to use the latest versions of everything. I think tailwind gives you more time before you need to rerecord a lesson. It drives me off when i want to make the application the same as in a course but it will never look nowhere near the one presented. I am not a fan of bootsrap! When it comes to customization all frameworks fail. Takes more time than writing the code in css. However theming in tailwind is as easy as it can get.

[@AbdullahAlMamun-mc4nq]

vanila css> good for front end web designer. bootstrap> good for back end web developer. tailwind> good for full stack developer.... this is my thinking, any one can choose anything

[@insanecuckooman8342]

grid only from bootstrap + custom scss. best combo.

[@milosleng1175]

Exactly what I do haha. Just copy bootstrap CDN and use grid. Row, cols, container, boom! That's it. The rest plain CSS. It's perfect.

[@rahulvanmali1406]

Sir your thoughts on material design! MD-bootstrap or angular material!?

[@academind]

Angular Material is more than just a styling framework - it ships a lot of pre-built Angular components. So I guess the comparison isn't really that helpful. If you want pre-built components like date pickers or datatables, go with Angular Material. If you most want the styles (and some basic components): Go with md-bootstrap I guess

[@wpharding]

I am new to web development. Frameworks like Bootstrap or Tailwind seem to violate the principle of "separation of content and styling". Is that true? If so, is that a significantly debated principle?

[@calstate]

Don't think it's true with Bootstrap because they just use classes. Tailwind I believe uses inline styling. Inline styling has its pros and cons. It's really just a matter of taste.

[@AlfaToTheOmega]

I think this idea is obsolete. This paradigm works well for simple and consistent documents that can be styled with minimal use of classes. If you want to make a modern website, you'll find yourself wrapping elements solely for the purpose of styling. At this point, content and styling aren't coupled anymore. Sure, you could give the class a "semantic" name like 'news', but you're actually just obfuscating the fact that you want to give the news block a rounded border. W3C gives the following advice: "Use class with semantics in mind." [...] "Think about why you want something to look a certain way, and not really about how it should look." (www.w3.org/QA/Tips/goodclassnames). Now go their homepage and inspect the DOM. You'll find class names like 'size1on3' and 'w3c_logo_shadow'. Or what about this beauty: . Very semantic indeed. I do realise that I'm using the logical fallacy "tu quoque". But still, I think that their incapability to follow their own advice speaks volumes. My advice: try to use semantic tags whenever possible: for tables, for buttons, for paragraphs, etc. Only use 'helper elements' like wrappers, containers and inners when you really need them. From there, keep a pragmatic approach and use the most appropriate tool for the job. Just think about aspects like maintainability, usability, compatibility and performance. Each project is different and I think there is a use case for each method mentioned in this video.

[@thientranduy9806]

Your videos are very useful, thank you for your share!

[@academind]

That's really great to read Thiên, thank you for your comment!

[@joeporsche1767]

Awesome. I like the way you compare the thing and also your Udemy course is great.

[@academind]

Thanks a lot Joe, great to read that you like both the video and the course :)

[@ayushpattanayak7105]

Bootstrap is great and if you have your basics clear then u could have a look on Tailwind CSS . It's one of the best thing a Front End Web Dev could have. I really enjoyed learning about that 🔥

[@nico220790]

I can get really uncomfortable when I limit/remove the possibility of changing a style of a single component without having to dive into the html. Even though css and html still are separate, I don't feel that "separation of concerns" is respected. By composing classnames, you're actually still styling your page in html. The only difference with the ol' style-attribute is that the css is shared across components thanks to the use of class names. But the result of the composition in classnames is not shared at all (ignoring tpl-parsers). My stylesheets mainly use BEM. The usage of scss or postcss make it possible to reuse code through mixins, only this way I keep all my styling in css files and limit the composition of classnames in HTML, respecting the separation of concerns as much as possible. I have stolen many ideas from these frameworks and added them to my workflow. Component & utility libraries will require some customisations as many project will ask just that little thing that is different than what these frameworks provide, forcing you to "hack" into or around these systems.

[@freeyourmind7538]

Is this professional??? Using Bootstrap for the layout(rows/columns) and then using CSS vanilla to style the website to your own according? I seem to prefer it this way, am i wrong?

[@エッ-p8c]

Ive been stressing my self all these times to learn css frameworks but it seems that it doesnt really matter since vanilla css is enough as long as you’re proficient using it. I think learning sass is enough for me

[@renancoelho5657]

Thank you for this video! You're awesome!

[@academind]

Thank you very very much for your support Renan, YOU are awesome!

[@BneiAnusim]

Bootstrap is quick but all the designs look very BOOTSTRAPY! TailwindCSS is awesome but it has a learning curve! TailwindCSS is fast, you don't have to spend time figuring out how to name your classes, and is greater for maintainability. You don't have to worry if you are going to break something when changing or updating your CSS.

[@johnunni85]

Awesome .. great way to explain .. hats off ..

[@academind]

So happy to read that you like the video John, thank you!

[@fighter8931]

Very nice tutorial