Bí kíp code CSS hiệu quả hơn mà các bạn nên biết

Trong quá trình đi làm và học tập mình đã tích hợp được nhiều kinh nghiệm cũng như nhiều lỗi về CSS mà chúng ta trong lúc làm hay gặp, trong bài viết này mình chia sẻ chúng cho các bạn hi vọng sẽ giúp ích cho các bạn nhé.

Xuất hiện khoảng trống giữa các thẻ, nguyên nhân có thể là do margin, padding, thẻ inline-block hoặc chưa dùng reset CSS

Kích thước lớn hơn dự kiến dù đã set width, height, nguyên nhân là chưa dùng box-sizing: border-box dẫn đến width height thêm padding và border vô nên to hơn
Khi dùng flexbox co lại màn hình nhưng cấu trúc không rớt xuống hàng nguyên nhân là do mặc định flex-wrap: nowrap nên nó sẽ không rớt
Khi làm việc với chữ đặc biệt là dạng người dùng nhập vào nhiều người cố ý spam với 1 từ dài như aaaaaaaaaaaaa hoặc chèn link thì giao diện sẽ bị bể, lúc này để fix mấy trường hợp này thì dùng word-break: break-word, hoặc break-all
Không CSS width height, margin top bottom, padding top bottom được, nguyên nhân là đang làm với thẻ inline để giải quyết chúng ta nên dùng display block hoặc inline block hoặc flex hoặc dùng thẻ block
Các thẻ như input, select, button, textarea nó sẽ lấy giá trị mặc định từ trình duyệt chứ không lấy từ body như font-size, font-family vì thế khi code đừng quên set cho chúng
Khi bôi đen các chữ có màu nền thì dùng css `:selection`
CSS cho placeholder bằng `input::-webkit-input-place, input::-moz-input-placeholder`
Ảnh quá to không co lại theo khung bao ngoài, chắc do thiếu `max-width: 100%`
Ảnh bị méo do thiếu `object-fit: cover`
Hình nền không hiển thị do chưa set width height hoặc đường dẫn sai
Position absolute chạy sai chỗ chắc là phần tử cha chưa set position
Đôi khi dùng border: 1px solid red bị lỗi cái border ko đều thì có thể đổi sang dùng border: thin solid red
Thẻ a không bọc trực tiếp thẻ a, 1 trang web tối đa 1 thẻ h1, các ID không được trùng nhau, thẻ img nên có alt tối ưu cho SEO
Thẻ ul li thẻ li không bọc trực tiếp li mà phải li ul li chứ không được li li cũng render ra HTML sai như thẻ a bọc thẻ a
Khi dùng reset css thì các thẻ strong, b, em, i không còn đậm với nghiêng là vì do các trình duyệt hiển thị khác nhau nên ngta reset lại, ở firefox thẻ strong nó sẽ đậm hơn so với ở Chrome
Mặc định các input, button, textarea khi nhấn vô sẽ có đường line, đó chính là outline để fix thì css outline: none
Để custom scrollbar gõ google css scrollbar ra trang CSS Tricks có chi tiết, hoặc ẩn dấu mũi tên của input type number tìm ở CSS tricks có luôn
Để ẩn scrollbar chúng ta dùng đoạn code sau

body{
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
 display: none;
}

Lý do khi dùng flexbox(row) các cột cao bằng nhau là vì thuộc tính align-items: stretch
Để ẩn spinner trong input có type là number ta dùng đoạn code sau

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Khi dùng flexbox với 3 phần tử mà muốn đưa phần tử số 3 về cuối thì chỉ cần đơn giản dùng margin-left: auto

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.list {
  display: flex;
}
.item:last-child {
  margin-left: auto;
}

Khi làm chức năng load more(tải thêm) mà không muốn bị thanh scroll chạy xuống thì dùng overflow-anchor: none
Khi làm chức năng click vào một phần tử nào đó tuy nhiên trên phần tử đó lại có phần tử khác nằm lên nhưng bạn không muốn nhấn vô phần tử đó thì CSS cho phần tử đó pointer-events: none
Đừng quên thêm cursor: pointer vào cho phần tử nào mà bạn muốn người dùng hiểu có thể nhấn vô được, button là một ví dụ
Tìm hiểu emmet để code nhanh hơn, học cách dùng custom snippets để làm nhanh hơn nữa
Muốn nhấn vào thẻ a có href bắt đầu bằng dấu # để scroll tới phần tử nào đó một cách mượt mà mà không dùng Javascript thì có thể CSS cho thẻ html scroll-behavior: smooth
Muốn bỏ resize trong thẻ textarea thì dùng resize: none trong CSS
Muốn chữ hiển thị trong trang web mượt mà hơn thì dùng đoạn code này cho body

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

Muốn tạo lớp nền mờ phía sau đặc biệt là khi làm lớp overlay phủ lên thì dùng đoạn code này, các bạn thay đổi giá trị sao cho phù hợp

.overlay{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.65);
}

Và còn nhiều nữa sẽ update thêm sau này…

Có thể bạn quan tâm: