Bài đăng

Các kỹ thuật quản lý CSS của website

CSS là ngôn ngữ giúp cho website lột được vẻ ngoài xấu xí thô kệch để khoác lên mình chiếc áo xinh đẹp. CSS là sự kết hợp của các bộ lọc, các thuộc tính hay thậm chí là các hiệu ứng animation, transition. Code css không hề khó nhưng làm thế nào để viết code css được chuẩn hơn, tối ưu hơn, giảm tải được việc viết nhiều code qua đó sẽ dễ dàng cho việc quản lý source code sau này thì không phải ai cũng biết. nếu bạn là một người mới tiếp xúc với css, cứ gặp bất cứ thứ gì cần trang trí, chỉnh sửa là lại lôi id hay class ra viết thêm css vào cho nó thì sẽ gặp vấn đề ở chỗ file css sẽ trở nên cồng kềnh, dung lượng file lớn làm chậm web khi load, rồi sau gặp bug, sẽ khó cho việc kiểm soát và sửa chữa cũng như nâng cấp sau này vì code không được sắp xếp đúng cách, bị trùng lặp nhiều đoạn css... Trong bài viết này, mình sẽ nói qua một số kỹ thuật quản lý CSS rất hay mà nếu bạn chưa biết thì nên xem qua một lần để bạn có thể làm việc với CSS tốt hơn. Các kỹ thuật quản lý CSS 1. Sử dụng SA...

Tìm hiểu về BEM

1. BEM là gì : Là một quy ước đặt tên cho các class trong HTML và CSS BEM là viết tắt của từ Block, Element, Modifier. BEM được tạo bởi team của Yandex. 2. Quy ước đặt tên .block {} /* Block */ .block__element {} /* Element */ .block--modifier {} /* Modifier */ .block  Thành phần cấp to nhất của abstraction hoặc component.  .block__element Thành phần con bên trong của block  .block--modifier  Là 1 phiên bản # của block. Hay những thay đổi style khác so với style ban đầu 3. Giải Thích về BEM qua ví dụ Một ví dụ về HTML sử dụng BEM 1. Modifier <a class="btn btn--green" href="#"> </a> Ở đây btn là block .btn---green là modifier. Style của chúng ta như sau .btn { background: gray; border: 0; border-radius: 3px; box-shadow: none; padding: 5px 20px; color: #fff; font-size: 18px; line-height: 1.5; } /* style .btn--green */ .btn--green { background: gr...