Enjoooy?? Subby subby!

@GammaWraith

4 жыл бұрын

I did.. Coursy? Coursy?

@lucianoramirez6525

4 жыл бұрын

as always so useful, but I have a question not entirely related. How could one get around having to get the back-end done yourself, and instead just have e.g. an email submission form made with an API? Could that be possible? If so how? Because I actually built a sort of fully-blown html and css project with different urls but my goal for this website is for it to get people submit their email to apply and stuff, but that would require some kind of back-end. Would it not? Hope I explained myself clear enough, sorry if not. Thanks again!

@juraev0056

4 жыл бұрын

@@lucianoramirez6525 Yes it does require some backend if you want people to sign up to apply for something. If you just want a contact form that sends you a user message from your website, its very easy to do.

@xrishi20

4 жыл бұрын

It's live sass compiler, not compilation i guess 🤭

@Saaztube

4 жыл бұрын

Had to subscribe. Thanks.

I want a Part 2 where you go more in depth with a bigger project!

I am a CSS newbie. The way he showed BEM using the $ helped me understand the cascade in CSS. Thanks!

I've actually been really enjoying your videos and I've watched quite a few since I found your channel the other day. A lot of stuff I've watched has been beginner-intermediate level but it doesn't feel like I'm missing anything I _must_ already know because you don't speak down to your viewer, which is really nice! Some channels kind of act like they're the best and everyone else sucks, so it's nice to watch videos where I can actually learn and feel like I'm getting somewhere with this.

I'm mad he never noticed that he added a class to the end of the list item tag

@1997matthew

4 жыл бұрын

It's the Auto Rename Tag plugin that's doing that

@CODINGVENTURE

4 жыл бұрын

@@1997matthew I know I'm just mad he didn't notice lol

@local9

4 жыл бұрын

You got mad at that... I got mad at calling Underscores (_) as Hyphens (-) and Hyphens as Dashes >.

@physx_naraka

4 жыл бұрын

I was about to raise my hand and tell him that, thought it was a real-life lecture .

@estoriassurreais3434

4 жыл бұрын

@@1997matthew thanks

Great video as usual.. I love these fast short and on point.. keepem coming

You are really good at explaining these things. You rock.

Best BEM explanation so far

I personal use BEM together with OOCSS any projects and it's for me a game changer. Simply clean structured and easy to read CSS. Keep up the good work! Regards from germany!

This is my new favorite channel :-D Thanks for all the great knowledge

Came here after watching Kevin Powell's video on BEM. There he had said "specificicity", and here Gary says "specifity". Guess Kevin stole Gary's "ci".

@RainOnline

3 жыл бұрын

lolol

@gabrielsequeira-bacher9049

3 жыл бұрын

😂

@AverageCho

3 жыл бұрын

me reading your comment: specifi-kitty...dammit

@UnknownUser-ts1sw

3 жыл бұрын

wtf😂

Best explanation with an example. Thanks.

great job with the slides... best slides I have ever seen

Thank you for explaining BEM so clearly and succinctly. You got a new sub and I'm looking forward to watching some of the other videos you have.

Awesome, simple explanation in less than 20 minutes!

Awesome job! Thanks, Gary🙌🏿

Great video, enjoyed the insight. Will try this out on our next project, cheers!

Thanks a lot sir. Really helped me a lot to understand it from scratch. I'm very much new to this SCSS and BEM concept

Tutorial on time. Thank you Gery Teacher. :)

It was great! Improved my method of coding CSS!

Great tutorial ! Good speed, clean and straightforward to the point. Thanks.

@GamingTSH

2 жыл бұрын

🙏❤️kzread.info/dash/bejne/nqF92buFdrzAabg.html❤️🙏

Couldn't be more explicit. Thank you!

the best BEM tutorial

Great easy to understand video. Thank you!

Excellent video to understand BEM methodology. Thanks!

if i wasnt already using React+Styled Components to deal with such issues, this looks like an amazing system to solve such problems in a practical and DX friendly way

So much style in your videos, it's actually delicious!

Very good explanation. Thank you!

Thanks! A really good example of using BEM.

Great Tutorial DesignCourse!!!

Solid clear explanation

Thanks! I got put onto a project late in development and found all these classes written like this and didn’t know what the heck was going on.

Very very good! was trying to understand this before but only now I understand :)

Very helpful, great tutorial. Thank you!!!

Thanks for all your great content always.

Thank you for a good explanation! This video helped a lot!

Thanks for a great intro to BEM. I used to do HTML/CSS years ago and need to pick it back up at work. These days my company uses BEM and SASS so this was perfect and very easy to follow.

Thank you Gary!

This video is very helpful especially for me.

Bem Bem... What a Bem Bem! 💎 Thanks for this great tutorial! 🤗🤗🤗

Thanks for such a helpful video

Specificity... Pronounced: spes-ih-FISS-city (5 syllables) :) Good video. I don't use BEM currently, but I'm going to play with it.

Thank you so much for this tutorial...

Thanks for making a video on this topic.....

Awesome! Thanks for your time

nice method on writing css, scss + bem probably the best way to go for large project

One piece of advice is: don’t forget utility-classes just cause you use BEM! A ”hidden” class makes more senese than having a ton of modifier classes that do the same thing, like ”card-hidden” and ”article-hidden” Only use BEM for unique styles and not common ones. You can combine BEM and utility classes, no need to go 100% in a single direction. doing ”card card-large hidden” is fine

this is so helpful , i understand them here better than my teacher

Done that loooong ago. Best decision!

Styled components are the bomb. Svelte and react have completely made BEM obsolete from my life and I love it

Good content, liked and subscribed. All the best!!

thank you! I loved this video

I've used BEM for many years. Modifiers are great and truly provides a nice way of stating a clear intention that this element has a shared base style and a variant that overrides or adds a few things. But the block__element concept is less useful. It's fine in tiny flat components that you don't change a lot. But in larger things the double underscore often has to be moved deeper down and feels useless. You begin with footer__menu but as that menu gets more and more children you rename it to footer-menu so can have children like footer-menu__user and footer-menu__faq If this renaming happens multiple times, or the dom tree for the footer is quite deep then you end up just forgetting which nodes have the block__element thing and which just use dashes. At which point I usually go "screw it, let's use single dashes all the way" and I never end up regretting it. I still use BEM on small isolated components though.

Fantastic video

Cool stuff!

Great video, thanks a lot!

Thanks dude!

Helps to understand BEM !

Awesome Garry

thanks for BEM explanation=))

Stunning.

Been like doing this, but without those double underscores and double dash for modifiers. However, thank you for showing this.

thanks for this

Great 💡, thanks

Very good. Thanks

GEnial! Thanks!

gonna follow that convention

Been using BEM method for over 2 month now... But thanks for reminding how it is..

This is *perfect* ! I'm gonna be using it even if the project is small. My CSS naming is a mess and this makes it super organized and coherent. THANK YOU

thanks a lot!

Great! Thanks a lot! 🤝👍

thank youuuu man

Man you got such a unique vocabulary haha 1:02 "specifity" 3:14 "complexitness" I think you mean specificity and complexity lol I love your videos btw Im just playing around.

@rand0mtv660

3 жыл бұрын

The second was was him saying "a little bit more complex than this".

great video

Great video. Subscribing now

great stuff simon, can you please make a video that explain how to configure php for vsCode, so it can auto complete and other things like the atom built-in feature

Thanks

Thanks sir :)

thanks!

I got into TailwindCSS before getting interested in BEM, so I never really ended up needing it. A useful video nonetheless for a quick overview!

@Gigusx

4 жыл бұрын

@Library Content Yeah, me as well! The nesting of SASS makes it all look very clean and easy to modify.

@Arttyor

4 жыл бұрын

Tailwind is framework tho, this is just methology

@Gigusx

4 жыл бұрын

@@Arttyor That's right, but it removes the necessity for using a naming methodology, at least when you follow the similar process that Adam Wathan (Tailwind's author) does.

thank you for the video! will you cover CSS-in-JS sometime soon?

Wow, one of the best practices! I love to use it with SASS or LESS! It makes writing your code much easier. Hovewer, BEM classes can be really long sometimes (class="card__heading card__heading--available main__card")

@ead5590

4 жыл бұрын

So true about it being long.. Sometimes I myself would forget what was the modifier I used.. 🤣 Then I'd have to browse through the entire HTML file looking for what I need to work on..

@rogaldorn7016

4 жыл бұрын

@@ead5590 or sometimes you can have similar classes 🤣 Especially, when your project as big as f...

@ead5590

4 жыл бұрын

@@rogaldorn7016 Definitely. That's very possible. And that is probably one of the reasons why we use stuff like BEM so that we don't have such issues. Then again, it's a matter of preference. If someone would like to use methodologies such as BEM or not, it's clearly up to the Developer.

@BenRangel

4 жыл бұрын

Why would you have one element be both "main__card" and "card__heading"? That doesn't make sense. Either it's a card or a heading for a card. Not both at the same time.

@rogaldorn7016

4 жыл бұрын

@@BenRangel yah, my bad. It should sound like "card main__card main__card--active"

Most of the things i learned from here ☺️

I'm so happy Angular has styles isolation mechanism and I don't need to use BEM anymore :D

@Zach2825

4 жыл бұрын

Vue has that too. It is so convenient

@diablo.the.cheater

4 жыл бұрын

@Angelo Stevens overkill is a feature not a bug

@ShadiMuhammad

4 жыл бұрын

@@diablo.the.cheater 😂😂

@etmargallo

3 жыл бұрын

Do you guys mean “scoped”?

thanks

Thank you so much. I feel like I have been given the secret handshake to the club :)

@GamingTSH

2 жыл бұрын

🙏❤️kzread.info/dash/bejne/nqF92buFdrzAabg.html❤️🙏

Thank you for this tutorial. In the beginning, why do we need two underscores for Class name instead of one underscore, which is simpler and more efficient?

I heard a lot about BEM and then I discovered TailwindCSS which is mega cool. Worth checking out :)

Design Course thank you so much for your amazing tutorials. Your Videos are really unique. I have a question, when a block gets very big(when I start a big project it gets really confusing for me how to break it to smaller blocks and elements. does anybody have any suggestions? Thank you all in advance :)

Omg you get a thumbs up on this video my friend especially after you said "You better not leave". 😂 That moment definitely made me laugh so hard but also made me want to stick around to the end. Thanks for having an awesome sense of humor while teaching. 💜

I’ve been using it just because I saw that JetBrains has it on the webpage. Now I see why I’m doing it

@notkamui9749

4 жыл бұрын

I like the fact that you follow JetBrains :)

@AndiRadyKurniawan

4 жыл бұрын

Why is that? What's the benefit?

@lennart5845

4 жыл бұрын

Andi Rady Kurniawan if you’re using scss, which will definitely help you a lot, this Bem makes it easier. You can type .menu and in scss the „&“ character selects it again but you can add something. So for example if you have a list in your menu which has the class „menu__list“ you can just type in the menu css: &__list (.menu__list). And that with several items. It just helps you a lot and organizes everything

Please release advanced BEM

perfect

Awesome

One interesting too is RSCSS method

BEMs weakness, if there’s one to be extracted from these comments, is its name. Blocks, elements; most of these people know what those are and that can make it confusing when there are more than 2 nest levels. What I take away from this is that it’s definitely useful if used thoughtfully, when considering the first slides: What blocks on are project are similar in HTML structure but unique in content nature or styling? Card, content, list, these terms are general but if I imagine a blog post preview, album preview, news article preview or rental listing, I can see how BEM would be beneficial. Thank you.

Great vid thank you, what compiler are you using and how are you watching your files?

awesome

I'm not a fan of BEM. I prefer using utility classes instead of --modifier. Most IDE don't have a problem selecting "card-header" on double click, but will struggle with "card__header". Having an arbitrary long class name will also increase file size. We're removing line breaks and spaces on minification, but 30 letters long classes are fine.

@BenRangel

4 жыл бұрын

Kazu: which IDE? i thought most had a hotkey to select by free text search. I use vscode and I use cmd+d to select any string by free text search

@BenRangel

4 жыл бұрын

What do you mean by arbitrarily long? In BEM the idea is you can only have a single level: card__header is ok but card__header__title or card__header__title__icon is banned

@devKazuto

4 жыл бұрын

@@BenRangel I'm talking about double click text selecting, not hotkey. Some don't see cohesion of a string like "abc--xyz". Having class="button button--state-success" creates a larger filesize in HTML than class="button success". In CSS it's the same. .button-state-success are more characters than .button.success and therefor results in a larger filesize.

@kootahaitoo

4 жыл бұрын

@Angelo Stevens yeah file size is like the last reason i would worry when dealing with BEM and CSS

@alexsmith-rs6zq

3 жыл бұрын

Why not both? I’ve recently started using a combination of utility classes for shared styles and BEM for unique styling. It seams to be working well so far.

I'll stick to Tailwind CSS mainly, BEM is handy for other things but aye, might use it one day.

@LuBre

4 жыл бұрын

Watching the code example on Tailsiwn'ds homepage made me cry. The amount of inline code is insane.