Thiết kế CSS như nào cho trông đỡ cũ kỹ ?

Ok, thôi được rồi, thú thật mình không phải dân Designer nên cũng chẳng biết chính xác thế nào là đẹp, cơ mà cũng vài năm trong nghề nhìn mấy cái web cũng thấy có cái trông xịn xò, hiện đại, có cái trông lởm lởm. Và chúng ta cùng thử đi qua 1 vài tips CSS xem sao.

1. Hãy bỏ thói quen sử dụng px: px là pixel, là đơn vị thông dụng nhất khi thiết kế. Tuy nhiên đối với lập trình viên, chúng ta sẽ cần chú ý tới chức năng và vị trí tương đối hơn là vị trí tuyệt đối. Giả sử khi người sử dụng phóng to, thu nhỏ cửa sổ trình duyệt, sử dụng mobile, vậy nếu dùng pixel sẽ rất dễ gây ra các kết quả không mong muốn.
   Đối với các div phân chia layout, chúng ta nên sử dụng % hoặc vw, vh. Còn đối với padding/margin, nên sử dụng em/rem. ( .5em hay 1em là kích cỡ tiêu chuẩn).
   Đối với những bạn lập trình lười, thường copy css trong file thiết kế, trong đó đại đa số các thành phần được chia thành pixel, nên cần tránh điều này.
2. Bỏ thói quen sử dụng important!. important là một thuộc tính hay được sử dụng khi chúng ta không biết làm sao mà mãi không sửa được css. Và đúng lúc ấy important đến với chúng ta như 1 vị cứu tinh. Tuy nhiên important lại là một thói quen rất xấu vì khi trong css có nhiều important, chúng ta lại tiếp tục không biết đâu là nơi làm css thay đổi.
3. Không đặt class/id cho html mà sử dụng selector dài. Đối với những người lười, copy selector trên trình duyệt là việc rút ngắn thời gian tốt nhất. Tuy nhiên về lâu về dài, css sẽ bị dài và rất khó tìm kiếm. Tốt nhất chúng ta nên đặt tên cho class/id của nó hoặc ở ngay phía trước khoảng 1-2 element nhằm định danh và dễ đọc hơn cho người làm tiếp theo. Không ai muốn đọc 1 selector có dăm bảy class name phía trước cả.
4. Class name và id trong html không nên đặt tùy hứng. Một số loại front-end framework sẽ hiển thị vài loại id đặc biệt trên html. Tuy nhiên về id và class thì chúng ta nên đặt theo 1 vài nguyên tắc nhất định và nhất quán trong toàn project. Có một số đặt theo phong cách BEM, hoặc đơn giản hơn là gạch ngang giữa các từ. Đồng thời tránh sử dụng các từ quá chung chung và thông dụng như form, input mà nên đặt vào 1 hoàn cảnh cụ thể như register-form, username, password, …
5. Viết comment cho html và css. Thông thường ít được viết comment chú thích, vì mọi người nghĩ là hiển thị sao thì viết thế nên ai cũng hiểu. Tuy nhiên các bạn cứ thử làm việc với 1 trang html có hàng trăm dòng đi rồi thấy nó vất vả ra sao. Đối với việc phân chia HTML, mỗi một “cụm” nên được cách nhau bởi 1 dòng trắng. HTML tự động xóa dòng trắng giữa các thẻ HTML nên chúng ta không cần phải lo.

Tác giả: Cao Văn Thành

14Nhung Bee, Nguyễn Thị Khuê và 12 người khác2 lượt chia sẻThíchBình luậnChia sẻ