Best Practices của tôi – CSS
1. Lời nói đầu
Ngày nay CSS đang bị dùng dưới mức tiềm năng. Có một khoảng cách giữa lập trình viên Angular/React/Vue/... và UI designer.
UI designer lồng ba mươi thẻ <div> và gắn lên đó bốn mươi class CSS, trong khi dev Angular cứ hai tuần lại phấn khích với thư viện mới nhất, dù dependency
hell của anh ta từ lâu đã không build nổi nếu thiếu npm i --force, vì các peer dependency xung đột nhau. Tín đồ TypeScript chẳng mấy quan tâm đến CSS và HTML. Ngay cả với những input đơn giản nhất,
anh ta cũng phải dùng Material, vì sợ rằng nếu không thì sẽ không làm nổi phần validation. Và tất nhiên là không ai muốn mất thời gian phát minh lại bánh xe. Anh ta không nhận ra rằng ngay ở
yêu cầu đầu tiên mà thư viện không đáp ứng được, toàn bộ thời gian tiết kiệm được lại mất sạch, và rồi anh ta sẽ ngồi đọc GitHub issue của thư viện đó.
Là lập trình viên trong một dự án fullstack, hiếm khi bạn có cơ hội thể hiện hết khả năng thiết kế frontend của mình. Bạn nhận screen mock trên Figma và phải làm y hệt như vậy. Phần lớn lập trình viên frontend kiểu này thậm chí không biết rằng chỉ với một dòng CSS là đã có được một layout responsive. CSS mạnh hơn bao giờ hết. Đã qua rồi thời của những mánh style bằng JS, vô số media query và các cách lách cho IE 8. Hoan hô!
2. Super Centered
Không phải lúc nào cũng được đánh giá cao trong buổi phỏng vấn, nhưng tôi thì khoái lắm: Khi được hỏi có giỏi frontend không, tôi thích trả lời “Ồ có chứ. Tôi căn giữa theo chiều dọc được một thẻ <div> đấy.”
Căn giữa một thẻ div vốn nổi tiếng là khó.
Giờ thì hết rồi:
.parent {
display: grid;
place-items: center
}3. Responsive Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsive Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. Bố cục trang
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Thanh bên (Sidebar)
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}