Giải đáp về BEM | Cách đặt tên khi các Block lồng nhau
Вставка
- Опубліковано 8 жов 2024
- 👉 Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: fullstack.edu....
👉 XEM LỘ TRÌNH HỌC: fullstack.edu....
Video này mình sẽ giải đáp những thắc mắc, câu hỏi của các bạn liên quan đến BEM. Khi các Block lồng nhau thì đặt tên như thế nào?
#hoclaptrinh #hoclaptrinhmienphi #html_css #frontend #backend #devops
----
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
![[Flexbox nâng cao] Liên hệ Flex model với các thuộc tính Flexbox trong CSS](http://i.ytimg.com/vi/Ma8q2RYH5qY/mqdefault.jpg)
- BEM (Block - Element - Modifier)
- Ý nghĩa:
- Block: Khối
- Element: Thành phần trong khối
- Modifier: Bổ sung ý nghĩa cho block hoặc element (viết thêm 1 class, để bổ sung ý nghĩa)
- Cú pháp
- .block
- .block__element
- .block-modifier
- .block__element-modifier
> Nếu có nhiều block lồng nhau, có thể tách các block con, cháu thành block độc lập. Ví dụ:
.header
⇒ .navbar
⇒ header-search (⇒ header-search__input, header-search__btn)
>
Mình thấy bạn dùng rất thuần thục các shortcut trên Visual Studio Code. Bạn có thể lầm 1 video để chia sẽ kinh nghiệm đc ko ? . Thank :D
Cảm ơn a nhiều , rất dễ hiểu
kênh Tiếng Việt đầu tiên dạy lập trình làm em có hứng thú. Chúc anh có nhiều sức khoẻ để ra nhiều video hay hơn nũa nhé.
Hay quá a, e tìm hiểu nhiều nguồn thì mỗi nơi dùng bem lại khác đi 1 chút, quan trọng là khi làm việc cần có rule để mọi người trong team có thể làm việc được với nhau.
Đúng rồi bạn, mỗi công ty sẽ có 1 quy tắc đặt BEM riêng, nhưng vẫn sẽ tuân theo những quy tắc chung nhất như trong video 1 vs 2 anh Sơn chia sẻ.
Cảm ơn anh rất nhiều!
Cảm ơn anh vì các bài học, rất dễ hiểu, từ lúc xem video của anh em có hứng thú hẳn
đúng cái tôi đang cần!! cảm ơn!!
Cảm ơn anh.
Hay quá anh owiii, mong anh ra video tiếp ạ
Rất hay và hữu ích ạ, cám ơn anh, trước học e cũng ko biết trường hợp đó đặt sao 😁
cảm ơn anh nhiều !
Hóng từng video
Hóng anh ra thêm video khoá NodeJS ạ ❤️
:> anh chia sẻ toàn những điều hữu ích
Hay
Anh làm 1 video chỉ lộ trình javascript phía front và back end đi anh
A cho e hỏi cách a đặt tên class để lấy element trong Javascript được không a? Cách a lấy elements thì lấy luôn tên BEM hay a có cách nào khác không a? Chẳng hạn đặt thêm tiền tố js-submit hay a dùng id để lấy ạ? Thanks a nhiều! E đọc nhiều về BEM, e thấy cách a làm rất hay.
Anh ơi, anh dùng extensions nào mà viết code đã quá, chỉ em với.
02:30 button là thành phần dùng chung ko có modifier
16:10 tách khói layout nhỏ tránh tên class dài
a ơi nếu mà tách riêng ra như vậy thì gọi ở css là đi từ cha vào hả a
ví dụ mình có nhiều thằng lồng nhau quá thì mình chỉ cần đặt parent__chiltd thôi được không
ví dụ: header__nav, rồi nav__iteam chứ hong cần thêm header__nav__item
Làm sao có thước như a vậy ạ
2:28 anh cho e hỏi. Nếu giả sử e không muốn cái button đó bo tròn trong .card nữa, e sẽ viết như này có đúng không ạ?
.card .btn {
border-radius: 0px;
}
Em thêm một class làm modifier cho class .btn nhé, ví dụ: .btn--not-round, và modifier này bỏ cái bo góc đi
@@F8VNOfficial ok anh
mình dùng top-search__input-.. đc k nhỉ mn
😗😗