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

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

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…

Bài viết gốc được đăng tải tại evondev.com

• CSS cơ bản toàn tập dành cho người mới phần 1
• Tạo Input AutoComplete đơn giản với CSS trong React
• Tìm hiểu Conditional Border Radius trong CSS

Đừng bỏ lỡ việc làm IT hấp dẫn trên TopDev