Тёмный

The Block Element Modifier (BEM) Naming Convention (Methodology) - CSS Tutorial 

dcode
Подписаться 131 тыс.
Просмотров 48 тыс.
50% 1

Read up on BEM here:
www.getbem.com/
In this video we're going to take a look at the widely popular front-end naming convention called BEM (Block Element Modifier). It makes your code easier to read and maintain, and keeps your codebase robust. It's also really easy to understand and start using, no matter your expertise in web development.
To explore this, we're going to be creating web components that represent a user.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
www.getbem.com/
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #css #webdev

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 54   
@danialranjbar9805
@danialranjbar9805 2 года назад
this video really deserved a like
@pulok9909
@pulok9909 4 года назад
best tutorial on BEM in the youtube. pretty much clear.
@RahulNath
@RahulNath 4 года назад
Great video - Loved the last part on not replicating the HTML hierarchy in the class names. Felt messy doing that and was searching for suggestions on that :)
@Qbabxtra
@Qbabxtra 3 года назад
This guy has the most mechanical keyboard of all mechanical keyboards.
@dcode-software
@dcode-software 3 года назад
That's funny, I used to say that and be envious of other people on RU-vid
@munishthakur8018
@munishthakur8018 2 года назад
Sweet, Simple and Sweet. Loved this tutorial!
@maicongunner
@maicongunner 3 года назад
Perfect explanation, thanks for sharing this video with us!
@behnazhakak2387
@behnazhakak2387 2 года назад
Very good explanation!Specially the last point that you said. I was confused what is right to do! Thank you :)
@jasonazevedo1983
@jasonazevedo1983 4 года назад
Great video, helped me a lot, I was confused about this stuff at first. But now I understand it!! Thanks for the great video!!
@dcode-software
@dcode-software 4 года назад
No probs! Enjoy BEM mate
@clockwerkz
@clockwerkz 4 года назад
Great explanation - When you said having the image outside of the user profile wouldn't make any sense was a light bulb moment for me. I struggle sometimes on figuring what is a block and what is an element. I have a question tho - what about more nested components - like take for example if you had a card that had a card header and a card body. Would you consider the card body as a block because, like the button, can still stand on it's own.. or is the card-body an element of it's parent card?
@n4botz
@n4botz 4 года назад
I love BEM and myself combine it with SMACSS (Scalable Modular Architecture for CSS). I work all the time with Sass and your short Video really helps to unterstand, how to write clean and easy maintable CSS. Keep up the good work! Best regards from Germany, Patrick.
@dcode-software
@dcode-software 4 года назад
Hey thanks mate! I have heard of SMACSS but never tried it myself, I'll give it a go!
@coka2596
@coka2596 Год назад
Thanks for such a great explanation ! Great video.
@algo-prog
@algo-prog 4 года назад
Thank you very much. Very useful tutorial
@mattk4323
@mattk4323 5 лет назад
great video mate, these little tip videos are really good with your easy teaching approach. keep it going
@dcode-software
@dcode-software 5 лет назад
Haha thank you, mate. I thought this video was a bit sloppy to be honest but hey, if it helps people then I'm happy!
@juelzmarco750
@juelzmarco750 3 года назад
i know it is kind of randomly asking but do anybody know of a good site to stream newly released series online ?
@richardramos7267
@richardramos7267 5 лет назад
Thanks mate, you've explain very well, I also like how you explain the last part, I actually kind of doing that in the past, so my class name become so long lol like section__name__image--dark.
@dcode-software
@dcode-software 5 лет назад
Yeah mate, you're welcome!
@inayathkhan100
@inayathkhan100 4 года назад
Very clearly explained and useful Thanks a LOT
@dcode-software
@dcode-software 4 года назад
No problem.
@EnzoAuditore
@EnzoAuditore Год назад
Thank you for this mate.
@parasarora5869
@parasarora5869 5 лет назад
amazing video !!
@JohnnieDoe183
@JohnnieDoe183 2 года назад
Surely in this example, the button DOESN'T make sense outside of the card, because the function of that button is to link to the profile of the user within the card. If the button were outside the card, how would one know who's profile it was linking to? Or in BEM is it less about your specific use case, and more about whether things are usually able to stand alone? E.g. buttons. Thanks!
@roym4457
@roym4457 2 года назад
i have the same question
@glennpittman1338
@glennpittman1338 4 года назад
Nice overview of BEM. Thanks! What color theme are you using in VS Code in this video?
@dcode-software
@dcode-software 4 года назад
No probs! The theme is called Min Dark
@mustafamahmud2977
@mustafamahmud2977 4 года назад
Great video bro.
@dcode-software
@dcode-software 4 года назад
Thanks mate glad you liked it
@0the0ambient0
@0the0ambient0 3 года назад
Great explanation. Thank you.
@dcode-software
@dcode-software 3 года назад
You're welcome!
@onurdemirtas4589
@onurdemirtas4589 3 года назад
Awesome! Thanks a lot...
@tedweidenbach2903
@tedweidenbach2903 3 года назад
Do you have the files available for download so we can do this with you? I have watched this several times but doing while watching I can learn things so much better.
@mjylove2
@mjylove2 Месяц назад
this video is amazing
@captainalpha4853
@captainalpha4853 3 года назад
thanks man! you help me a lot! keep it up my g
@dcode-software
@dcode-software 3 года назад
No worries! And cheers 😁
@nawabali385
@nawabali385 4 года назад
Awesome :)
@valmn_cc
@valmn_cc 3 года назад
@dcode How do you add the 2 pixels to your underscores in VS Code e.g. user__photo) if I change the letter spacing setting in vsCode, it adds 2 pixels between each letter. I just want it before the underscore so that it is obvious there are 2 underscores next to each other? Thanks
@DiscipleW
@DiscipleW 4 года назад
Sweet !
@umutozdemir7548
@umutozdemir7548 4 года назад
Thankfully now there is a standart about CSS. I would solve problems but never get satisfied with my CSS code.
@castro6612
@castro6612 2 года назад
What font you are using in your visual studio code?
@kennnacion7036
@kennnacion7036 3 года назад
How did you made your localhost to youtube.local?
@alexander3293
@alexander3293 3 года назад
editi you hosts file (/etc/hosts on linux) and (C:\Windows\System32\Drivers\etc\hosts on windows) and add the following line 127.0.0.1 youtube.local
@tenebrae1191
@tenebrae1191 Год назад
👏👏
@noorkhorasi
@noorkhorasi 5 лет назад
would have been nice if you shared the code
@almannazyrov394
@almannazyrov394 4 года назад
Omg, floats, braah
@feeverable
@feeverable 5 лет назад
People still using floats in 2019? God damn...
@dcode-software
@dcode-software 5 лет назад
It can be a lot easier to use floats for doing quick and easy things over flex box, in my opinion :)
@feeverable
@feeverable 4 года назад
@Pegasus Agree, but using floats in 2019 mean that you are an amatour. This is basics, and I am just suprised, that anyone still use floats.
@clockwerkz
@clockwerkz 4 года назад
@@feeverable I'm here to see his explanation on BEM, not layout best practices.
@roym4457
@roym4457 2 года назад
@@feeverable tell that to IE LOL
@Elfdogable
@Elfdogable Год назад
@@feeverable Wish your comment would just 'float' away.
@korkut31
@korkut31 11 месяцев назад
float ? c'mooon . how old are u. age of 60 ?
Далее
A look at the CUBE CSS methodology in action
47:09
Просмотров 102 тыс.
You Probably Need BEM CSS in Your Life (Tutorial)
18:47
Learn CSS BEM (and avoid these common mistakes)
15:36
Просмотров 4,3 тыс.
How to Organize CSS | Beginners BEM tutorial
20:33
Просмотров 20 тыс.
BEM 101: How to Make Web Design Organized & Scalable
1:01:37
BEM in 6 minutes - CSS Methodology 2024
6:22
Просмотров 31 тыс.
Should You Use Tailwind CSS?
7:47
Просмотров 349 тыс.