Thực hành BEM vào project website Landing Page

Dẫn nhập

Trong bài học trước chúng ta đã cùng nhau tìm hiểu về BEM VÀ CÁCH ĐẶT TÊN CLASS CHO ELEMENT. Trong đó, bạn cần tìm hiểu về CÁCH CSS HOẠT ĐỘNG để hiểu rõ hợi lợi ích
của việc sử dụng BEM

Trong bài học này chúng ta sẽ cùng Áp dụng BEM vào đổi tên class trong project Website Landing Page.

---

Nội dung

Để tiếp thu tốt bài học này, các bạn cần:

• Có kiến thức cơ bản về CSS.
• Đã xem qua bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS VÀ 3 THỨ ĐỂ TẠO 1 WEBSITE TỐT.
• Đã xem qua bài XỬ LÍ TRÙNG LẶP KHI KHAI BÁO CÁC FEATURES HAY CÁC PROPERTIES CỦA CSS
• Đã xem qua bài TÌM HIỂU QUÁ TRÌNH XỬ LÝ CUỐI CÙNG CỦA CSS
• Đã xem qua bài BEM VÀ CÁCH ĐẶT TÊN CLASS CHO ELEMENT

Nội dung bài học chúng ta sẽ:

• Đổi tên class trong project WebLanding Page

---

Đổi tên class trong project WebLanding Page

Bây giờ chúng ta sẽ quay trở lại file index.html trong project để sửa tên class

Ở đây ta có thể thấy header là block, vì nó đứng riêng rẽ và tồn tại độc lập

<header class="header"></header>

Những class như logo-box, logo và text-box là element vì nó chỉ xuất hiện trong BLOCK header, phụ thuộc vào header. Đổi tên class theo qui tắc block__element ta có các class

• header__logo-box, header__logo, header__text-box

<header class="header">
        <div class="header__logo-box">
            <img src="./img/logooutline.png" class="header__logo" alt="logo">          
        </div>
        <div class="header__text-box">
            <h3 class="heading-primary">
                <span class="heading-primary__main">
                    selftaught
                </span>
                <span class="heading-primary__sub">
                    is how you survive
                </span>
            </h3>
            <a href="#" class="btn btn-white btn-animated">See our courses</a>
        </div>
</header>

Tiếp đến ta thấy heading-primary là 1 BLOCK vì nó đứng độc lập và có thể tái sử dụng ở những phần khác trong webpage, không phụ thuộc BLOCK header, heading-primary__main và heading-primary__sub là 2 kiểu của heading-primary (2 MODIFIERS). Ta đổi tên class theo qui tắc BLOCK—MODIFIER có:

• heading-primary--sub, heading-primary--main 

            <

<h3 class="heading-primary">
    <span class="heading-primary--main">
                    selftaught
    </span>
    <span class="heading-primary--sub">
     is how you survive
    </span>
 </h3>

Tương tự ta thây .btn cũng là block (có thể tái sử dụng và không phụ thuộc và block header) với 2 MODIFIER là animated và white (button có hiệu ứng, button trắng):

• btn--animated, btn--white

<a href="#" class="btn btn--white btn--animated">See our courses</a>

Việc tiếp theo của chúng ta là chỉnh tên class trong file CSS là xong.

---

Code CSS

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777777;
    padding: 3rem;
    box-sizing: border-box;
}

.header{
    background-image: 
    linear-gradient(to right bottom, rgba(142, 158, 252, .8),rgba(28, 62, 255, .8)),
    url('../img/background1.jpg');
    background-size: cover;
    background-
    
    height: 95vh;
}

.header{
    -webkit-clip-path: ellipse(60% 60% at 50% 33%);
    clip-path: ellipse(60% 60% at 50% 33%);
}

.header__text-box{
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.header__logo{
    height: 7rem;
} 

.header__logo-box{
    
    top: 3rem;
    left: 3rem;
} 

.heading-primary{
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 6rem;
}

.heading-primary--main{
    display: block;
    font-size: 6.2rem;
    font-weight: 400;
    letter-spacing: 1.5rem;
}

.heading-primary--sub{
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.8rem;
}

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    font-size: 1.6rem;
    
    transition: all .2s;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 10rem;
    transition: all .4s;
}

.btn:hover{
    transform: translateY(-.3rem);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .2);
}

.btn:active{
    outline: none;
    transform: translateY(-.1rem);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn--white{
    color: #777777;
    background-color: #fff;
}

.btn--white::after{
    background-color: #fff;
}

.btn:hover::after{
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.heading-primary--main{
    animation: moveInLeft 1s ease-out;
}

.heading-primary--sub{
    animation: moveInRight 1s ease-out
}

.btn--animated{
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards;
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    80% {
        transform: translateX(1rem)
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(10rem);
    }

    80% {
        transform: translateX(-1rem)
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

---

Kết luận

Ở trong bài học này, chúng ta đã cùng nhau đổi tên các Class sử dụng quy tắc BEM.

Trong bài học sau chúng ta sẽ cùng LÀM QUEN VỚI SASS, để biết được lợi ích và sự hiệu quả của việc kết hợp giữa BEM và SASS.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình đễ giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.