ĐẶT TÊN CLASS VỚI QUY ƯỚC B.E.M | CO-WELL Asia

Để hiểu về Quy ước B.E.M, trước hết hãy nói về quy ước đặt tên. Quy ước đặt tên ( Naming convention ) giúp mọi thứ thuận tiện hơn bằng cách bảo vệ tính đồng nhất trong code bạn. Đó là một khuôn mẫu đã được điều tra và nghiên cứu và hệ thống hóa để đặt tên cho class .Quy ước đặt tên đặc biệt hiệu quả khi bạn đang thao tác theo nhóm. Khi viết code chung với những người khác, bạn sẽ thấy sự thiết yếu phải có tiếng nói chung, những quy ước chung nhằm mục đích bảo vệ những đoạn code hoàn toàn có thể ghép vào với nhau tuyệt vời và hoàn hảo nhất. Trong bài đăng này, tất cả chúng ta hãy cùng tìm hiểu và khám phá những quy ước đặt tên theo style Front-end .Có rất nhiều naming convention của Front-end được thương mến và sử dụng thoáng đãng như : OOCSS, SMACSS, SUITCSS, Atomic. Tuy nhiên, phổ cập và được nhiều dự án Bất Động Sản dùng nhất có lẽ rằng là quy ước theo hình thức B.E.M. Hãy cùng khám phá nội dung của quy ước BEM trong bài viết này .

 

Quy ước đặt tên B.E.M

Quy ước B.E.M là gì?

B.E.M là viết tắt của 3 từ Block – Element – Modifier, là một quy ước đặt tên tiêu chuẩn cho những class của CSS. Nó được vận dụng khá thoáng đãng và vô cùng hữu dụng trong việc viết CSS dễ đọc, dễ hiểu và dễ lan rộng ra quy mô cũng như maintain lâu dài hơn .Chính vì những ưu điểm của mình, BEM trở thành một quy ước thông dụng để viết style mà phần nhiều những dự án Bất Động Sản hiện tại đang sử dụng .

Tại sao lại cần dùng Quy ước B.E.M?

Khi thao tác với CSS, hay SCSS, SASS style, … việc viết mới khá đơn thuần, và có lẽ rằng việc làm tốn thời hạn nhất là đặt tên class. Vấn đề sẽ chỉ hiện rõ khi dự án Bất Động Sản đã chạy một thời hạn, code style trở nên nhiều hơn. Nếu bạn cảm thấy stress khi mà nhìn vào mạng lưới hệ thống style lằng nhằng, không theo quy ước nào thì đó là lúc ta cần dùng đến BEM .Hoặc khi dự án Bất Động Sản có thành viên mới vào, có một kiểu viết code riêng không giống với team dự án Bất Động Sản đan chạy. Đó cũng là lúc cấn trình làng cho mem mới đó chuẩn chung mà dự án Bất Động Sản sử dụng, ví dụ như B.E.M. Vì BEM là một convention phổ cập, năng lực cao những thành viên mới cũng hiểu và thuận tiện bắt kịp với quy trình tiến độ dự án Bất Động Sản .BEM sẽ làm cho code style của dự án Bất Động Sản dễ đọc, có quy ước, có sự đồng điệu riêng góp thêm phần tạo ra sự chuyên nghiệp cho loại sản phẩm .

Các khái niệm trong B.E.M

Như đã nêu ở trước BEM là viết tắt của 3 từ : BLOCK, ELEMENT và MODIFIER, có quy ước nối như sau :

 block__element–modifier

theo đó một class luôn khởi đầu với một BLOCK, sau đó là ELEMENT ( Được nối với block bằng 2 dấu gạch dưới ) và MODIFIER ( được nối với element bằng 2 dấu gạch ngang ) .

Block

Có thể hiểu Block là một khối độc lập của một nhóm, hay cũng hoàn toàn có thể dùng lại như một component. Tên của block vấn đáp cho câu hỏi “ Đây là gì ? ” .Nó cần ngắn gọn, dễ hiểu, bao quát, không đơn cử để có năng lực dùng lại cao nhất. Ví dụ như : card, post, …

Element

Element là một yếu tố bên trong block, và chỉ sống sót bên trong Block. Tên của Element cũng cần vấn đáp cho câu hỏi “ Đây là gì ? ” .Các bạn hoàn toàn có thể hiểu nó là những phần nhỏ, chi tiết cụ thể hơn của block như : ‘ card__title ’, ‘ card__text ’ hoặc là ‘ card__button ’ … …

Modifier

Modifier lao lý những trạng thái, biến thể hay hình dạng khác nhau của một block hay element. Tên của Modifier lần làm rõ một số ít câu hỏi như : To bao nhiêu ? Theme nào ? Nó khác gì những modifier khác ? Nó phản ứng như thế nào ? …Một số ví dụ về tên class có modifier : ‘ card — featured ’ of ‘ card__button — primary ’

Ví dụ về cách đặt tên theo quy ước B.E.M

Dưới đây là một ví dụ về cách đặt tên những component theo quy ước B.E.MTrên thực tiễn, sẽ có phát sinh thêm nhiều biến thể khác nhau mà tất cả chúng ta sẽ đề cập ở bên dưới. Quay trở lại với ví dụ, tất cả chúng ta sẽ có phần style như sau :

style.css

.post {}

.post__image {}

.post__name-tag--hightlight {}

.post__name-tag--normal {}

.post__name {}

.post__intro {}

Style cũng có thể được viết với định dạng SASS như sau

style.scss

.post {

    &__image {}

    &__name-tag {

        &--hightlight {}

        &--normal {}

    }

    &__intro {}

}

Dùng BEM với các loại Style front-end

Bên trên là ví dụ khi sử dụng BEM tích hợp với SASS, tất cả chúng ta cũng hoàn toàn có thể dùng BEM với styl, less, scss, …. BEM đặc biệt hiệu quả khi được sử dụng cùng Css preprocessor .

Biến thể của Quy ước B.E.M

BEM dù là quy chuẩn nhưng nó cũng có những biến thể khác nhau không tuân theo quy chuẩn. Đối với một quy ước lập trình, biến thể là để xử lý 1 số ít hạn chế mà quy ước đó mang lại .Lấy ví dụ với trường hợp sau đâu : mạng lưới hệ thống đang tăng trưởng nhu yếu những bạn phải viết nhiều block lồng nhau. Nếu vận dụng theo quy ước B.E.M thì tên class sẽ rất dài, tạo cảm xúc thừa thãi. Hoặc khi tên class quá dài, bạn muốn cắt ngắn nó đi nhưng vẫn bảo vệ quy ước BEM thì phải làm thế nào ?Trong những trường hợp này, tất cả chúng ta hoàn toàn có thể bỏ phần block, chỉ cần viết element – modifier để tiết kiệm chi phí thời hạn. Tuy nhiên so với CSS thường thì tất cả chúng ta không nên bỏ phần block đi, trừ khi đang sử dụng Css Processor .Dưới đây là một ví dụ khi bỏ bớt tên class :

<button class="btn__submit btn__submit--small btn__submit--green btn__submit--active">

    Submit

button

Xem thêm: 5 kiểu dữ liệu của biến trong Javascript được sử dụng nhiều nhất

Source: https://final-blade.com
Category: Kiến thức Internet