Bài 47: HTML,CSS từ Zero đến Hero(Bài 24 CSS Tiêu chuẩn class BEM)

Bài 47: HTML,CSS từ Zero đến Hero(Bài 24 CSS Tiêu chuẩn class BEM)

codersulution Chủ Nhật, tháng 9 18, 2022

  

1: BEM : là tiêu chuẩn đặt tên class khi viết css.

2: Ý nghĩa: là viết tắt của các từ Block Element Modifier

trong đó Block có nghĩa là khối, Element là thành phần trong khối, Modifier là bổ sung ý nghĩa cho block hoặc element

-    Tại sao phải dùng BEM? 

+    Mỗi người đặt một kiểu.
+    Members đặt class trùng nhau, CSS chồng lên nhau.

-    Cú pháp :

+     .block.
+     .block_element.

+    block--modifier.
+    .block__element--modifier.

-    Tính ứng dụng:

+     Xây dựng layout website.
+    Xây dựng thành phần trên website.

 -    Ưu Điểm

+    Tính năng rõ ràng.
+    Tái sử dụng dễ dàng.
+    Giúp cả team làm việc với nhau dễ dàng hơn.
+    Tính module, không lo CSS của class ảnh hưởng lên CSS của class khác.

-    Nhược điểm

+    Tên class dài.
+    Một số người cho là xấu.

-    Khi nào sử dụng BEM phù hợp?

+    Dự án nhiều members.
+    Dự án lớn, Số lượng page nhiều hoặc các thành phần trên giao diện nhiều.

Thực hành

1: Làm button
-    Enabled: Pointer, hover effect.
-    Disabled: arrow, no effect.
Tạo file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="main">
        <button class="btn btn--success btn--disabled">GO TO NEXT</button>
        <button class="btn btn--warn">OK</button>
        <button class="btn btn--danger">TRY AGAIN</button>
    </div>
    <div class="main">
        <button class="btn btn--size-s btn--success">GO TO NEXT</button>
        <button class="btn btn--size-s btn--warn">OK</button>
        <button class="btn btn--size-s btn--danger">TRY AGAIN</button>
    </div>
    <div class="main">
        <button class="btn btn--size-m btn--success">GO TO NEXT</button>
        <button class="btn btn--size-m btn--warn">OK</button>
        <button class="btn btn--size-m btn--danger">TRY AGAIN</button>
    </div>
    <div class="main">
        <button class="btn btn--size-l btn--success">GO TO NEXT</button>
        <button class="btn btn--size-l btn--warn">OK</button>
        <button class="btn btn--size-l btn--danger">TRY AGAIN</button>
    </div>
</body>
</html>
Tạo file style.css:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}
body .main{
    margin: auto;
    margin-top: 150px;
}
.main + .main{
    margin-top: 50px;
}
.btn{
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;   
    color: #fff;
    min-width: 120px;
    padding: 12px 48px;
    border-radius: 50px;
    cursor: pointer;
    transition: opacity .2s ease;
}
.btn:hover{
    opacity: 0.8;
}
.btn + .btn{
    margin-left: 16px;
}
.btn--success{
    background-color: #71be34;
}
.btn--warn{
    background-color: #ffb720;
}
.btn--danger{
    background-color: #ff623d;
}
.btn--disabled{
    opacity: 0.5 !important;
    cursor: default;
}
.btn--size-s{
    padding: 10px 20px;
}
.btn--size-m{
    padding: 15px 35px;
}
.btn--size-l{
    padding: 20px 56px;
}

Kết quả : để ý đoạn mã làm cho nút bị mờ đi.
2: xử lý sự kiện:
Tạo file index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="main">
        <button onclick="showSuccessToast();" class="btn btn--size-m btn--success">Show success toast</button>
        <button  onclick="showInfoToast();"class="btn btn--size-m btn--warn">Info</button>
        <button onclick="showErrorToast();" class="btn btn--size-m btn--danger">Show error toast</button> 
    </div>
    <div id="toast">
        <!-- success -->  
    </div>
    

    <script>
        function toast({
            title='', 
            message='',
            type='info',
            duration=3000
        }){
            const main = document.getElementById('toast');
            if(main){
                const toast = document.createElement('div');
                // xử lý sự kiện nhấn vào nút close sẽ đóng message
                toast.onclick = function(e){
                    if (e.target.closest('.toast__close')){
                        main.removeChild(toast);
                    }
                }
                // khai báo giá trị icon
                const icons={
                    success:'fas fa-check-circle',
                    info:'fas fa-info-circle',
                    error:'fas fa-exclamation-circle',
                }
                // lấy giá trị icon
                const icon = icons[type];
                // thời gian delay
                const delay = (duration / 1000).toFixed(2);
                toast.classList.add('toast',`toast--${type}`);
                toast.style.animation=`slideInLeft ease 1.5s, fadeOut linear 1s ${delay}s forwards;`;
                toast.innerHTML = `
                <div class="toast__icon">
                    <i class="${icon}"></i>    
                </div>
                <div class="toast__body">
                    <h3 class="toast__title">${title}</h3>
                    <p class="toast__msg">${message}</p>
                </div>
                <div class="toast__close">
                    <i class="fas fa-times"></i>
                </div>
                `;
                // sau khoảng thời gian nó sẽ ẩn đi để tránh chiếm chỗ
                main.appendChild(toast); 
                setTimeout(function(){
                    main.removeChild(toast);
                },duration + 1000);
                // cộng 1000 vì fadeout chạy 1s
            }
        }
        function showSuccessToast(){
            toast({
            title: 'Success ',
            message: 'Thành công !!!',
            type: 'success',
            duration:5000
            });
        }
        function showInfoToast(){
            toast({
            title: 'info ',
            message: 'Xem thông tin nào',
            type: 'info',
            duration:5000
            });
        }
        function showErrorToast(){
            toast({
            title: 'error ',
            message: 'Lỗi rồi bạn yêu!',
            type: 'error',
            duration:5000
            });
        }
    </script>
</body>
</html>
Tạo file style.css
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

/* button */

body .main{
    margin: auto;
    margin-top: 200px;
}

.btn{
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;   
    color: #fff;
    min-width: 120px;
    padding: 12px 48px;
    border-radius: 50px;
    cursor: pointer;
    transition: opacity .2s ease;
}
.btn:hover{
    opacity: 0.8;
}
.btn + .btn{
    margin-left: 16px;
}
.btn--success{
    background-color: #71be34;
}
.btn--warn{
    background-color: #ffb720;
}
.btn--danger{
    background-color: #ff623d;
}
.btn--disabled{
    opacity: 0.5 !important;
    cursor: default;
}
.btn--size-s{
    padding: 10px 20px;
}
.btn--size-m{
    padding: 15px 35px;
}
.btn--size-l{
    padding: 20px 56px;
}


/* toast */
#toast{
    position: fixed;
    top: 32px;
    right: 32px;
}

.toast{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    min-width: 400px;
    max-width: 500px;
    background-color: white;
    padding: 20px 0px;
    border-radius: 2px;
    border-left: 4px solid;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
    transition: all linear 0.3S;
    /* animation */
    /* chạy animation slideInleft trong 1,5 giây  */
    /*  sau 3s bắt đầu chạy animation fadeOut trong 1 giây  */
    /* forwards để kết thúc vòng chạy */
    /* animation: slideInLeft ease 1.5s, fadeOut linear 1s 3s forwards; */
}
@keyframes slideInLeft{
    from{
        opacity: 0;
        transform: translateX(calc(100% + 32px));
    }
    to{
        opacity: 1;
        transform: translateX(calc(0));
    }
}
@keyframes fadeOut{
    to{
        opacity: 0;
    }
}
.toast--success{
    border-color: #47d864;
}
.toast--success .toast__icon{
    color: #47d864;
}

.toast--info{
    border-color: #2f86eb;
}
.toast--info .toast__icon{
    color: #2f86eb;
}

.toast--warning{
    border-color: #ffc021;
}
.toast--warning .toast__icon{
    color: #ffc021;
}

.toast--error{
    border-color: #f77a06;
}
.toast--error .toast__icon{
    color: #f77a06;
}

.toast + .toast{
    margin-top: 20px;
}
.toast__icon,
.toast__close{
    padding: 0px 16px;
}
.toast__icon{
    font-size: 30px;
}
.toast__close{
    font-size: 20px;
    color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
 } 
.toast__body {
    flex-grow: 1;
}
.toast__title{
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.toast__msg{
    font-size: 14px;
    color: #888;
    margin-top: 4px;
    line-height: 1.6;
}



codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash