Thủ thuật CSS và những mẹo hay dành cho developer

1396

13-04-2020

Thủ thuật CSS và những mẹo hay dành cho developer

CSS sinh ra để giúp chúng ta thiết kế giao diện website đẹp mắt, linh hoạt. Tuy nhiên, thực tế cho thấy không phải ai cũng có thể sử dụng thành thạo CSS để dựng web. Bài viết này sẽ cung cấp cho bạn đọc những thủ thuật, kiến thức, và mẹo hay trong CSS mà bạn nên nắm vững để có thể làm chủ CSS một cách dễ dàng.

Sử dụng Flexbox Layout

Khi làm việc với CSS, một trong những yếu tố quan trọng nhất cần quan tâm là responsive. Để làm được điều này thì việc sử dụng Flexbox layout sẽ tối ưu và đơn giản hơn so với inline và float.

Về cơ bản, Flexbox là một kiểu dàn trang mà nó sẽ tự cân đối kích thước của các phần tử bên trong để có thể hiển thị đầy đủ nội dung trên mọi thiết bị.

Để định dạng các container dưới dạng flexbox, ta sử dụng cấu trúc:

.container {

display: flex;

/* Đừng quên thêm tiền tố cho trình duyệt Safari */

display: -webkit-flex;

}

Hiện nay, các thuộc tính của Flexbox hoàn toàn phù hợp với các trình duyệt web ở mọi thiết bị. Bạn cũng có thể điều chỉnh rất nhiều tính năng linh hoạt khi sử dụng thành thạo Flexbox. Khi đó, việc thiết kế giao diện responsive cho website sẽ vô cùng đơn giản.

Chi tiết cách dàn trang với Flexbox, bạn có thể tham khảo thêm bài viết trên blog của Thachpham: https://thachpham.com/web-development/html-css/huong-dan-css3-flexbox-toan-tap.html

Sử dụng Border-box cho mọi element

Border-box là một kiểu giá trị của thuộc tính box-sizing. Những người mới thường chưa biết về giá trị này, mặc dù nó khá hữu ích. Việc sử dụng border-box cho tất cả các phần tử trên trang sẽ giúp cho việc style mọi thử trở nên dễ dàng và ít gặp phải sự cố hơn.

Để hiểu rõ lợi ích của border-box, ta hãy tìm hiểu 2 kiểu giá trị của thuộc tính box-sizing:

- Content-box (giá trị mặc định): Bản thân nội dung đóng vai trò box. Khi chúng ta set chiều rộng (width) và chiều cao (height) cho một element, thì phần nội dung sẽ hiển thị kích thước đó. Ví dụ: khi element có width = 100px và padding = 10px, nó sẽ chiếm diện tích là 100 2*10 = 120px.

- Border-box: cả padding và border được bao gồm trong chiều rộng (width) và chiều cao (height). Với border box, Element có width = 100px và padding 10px tương tự trường hợp trên, thì giá trị width của element đúng bằng 100px.

Luôn sử dụng border-box cho mọi element sẽ giúp bạn tránh được nhiều sự cố không đáng có khi thiết kế giao diện web.

Chỉ sử dụng một loại margin dọc

Một trong những lời khuyên hữu ích nhất dành cho người mới bắt đầu làm việc với CSS là chỉ sử dụng margin dọc theo một hướng: top hoặc bottom. Nhiều người có xu hướng chia đều margin cho hai phần tử trên dưới để hiển thị một khoảng cách nhất định. Tuy nhiên đây là một cách làm sai trái và sẽ không đạt được kết quả như ý.

Không giống hầu hết các thuộc tính CSS khác, margin có đặc tính sẽ tự động gộp vào nhau theo chiều dọc. Tức là khi margin-top của một phần tử chạm vào margin-bottom của một phần tử khác, CSS sẽ chỉ hiển thị margin có giá trị lớn hơn trong số 2 margin trên, thay vì cộng chúng lại với nhau.

Hãy xem xét ví dụ:

HTML

CSS:

.square {

width: 80px;

height: 80px;

}

.red {

background-color: #F44336;

margin-bottom: 40px;

}

.blue {

background-color: #2196F3;

margin-top: 30px;

}

Ta sẽ được kết quả như sau:

Thủ thuật CSS và những mẹo hay dành cho developer - Ảnh 2.

Hình vuông đỏ có margin-bottom là 40px, hình vuông xanh có margin-bottom là 30. Tuy nhiên, thay vì hiển thị khoảng cách là 70px, thì CSS chỉ hiển thị khoảng cách 40px, tức margin có giá trị lớn hơn.

Mặc dù có nhiều cách để giải quyết vấn đề này, nhưng cách đơn giản nhất là luôn sử dụng margin chiều dọc theo một hướng duy nhất trên trang: top hoặc bottom. Thói quen của tôi là sử dụng margin-bottom.

Sử dụng CSS-reset

Việc giao diện web hiển thị khác nhau trên các trình duyệt khác nhau là điều không ai muốn. Tuy nhiên điều này thường xuyên xảy ra khi chúng ta sử dụng các lệnh CSS không tương thích với một số trình duyệt nhất định.

Để giải quyết vấn đề này, bạn có thể đặt lại giá trị CSS của tất cả các element về giá trị mặc định. Điều này giúp cho stylesheet "sạch sẽ" trở lại và hiển thị đồng nhất trên tất cả mọi trình duyệt.

Một số thư viện có thể thực hiện tốt điều này như normalize.css, minireset và ress. Nó giúp điều chỉnh lại các mâu thuẫn hiển thị trong trình duyệt phía người dùng. Nếu bạn không muốn sử dụng các thư viện trên, bạn có thể tự mình đặt lại CSS bằng cách vô hiệu hóa margin và padding:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Khi vô hiệu hóa margin và padding sẽ xóa các khoảng cách giữa các element (nếu có). Khi đó bạn có thể thoải mái đặt style cho chúng theo ý thích.

Ngoài ra thuộc tính box-sizing:border-box sẽ tạo thuận lợi cho việc căn chỉnh khoảng cách giữa các thuộc tính (như đã đề cập bên trên).

Mẹo tạo border cho table

Nếu bạn đã từng vật lộn với việc tạo style cho table trong HTML thì bạn không cô đơn. Thực tế, table của HTML không hề responsive và rất khó điều chỉnh style.

Ví dụ, khi bạn muốn thêm border vào table và các ô, rất có thể bạn sẽ mắc phải lỗi sau đây:

Thủ thuật CSS và những mẹo hay dành cho developer - Ảnh 3.

<table>

<thead>

<tr>

<th >Title</th>

<th >Description</th>

</tr>

</thead>

<tbody>

<tr>

<td><a href="https://tutorialzine.com/2016/07/take-a-selfie-with-js/" target="_blank">Take a Selfie With JavaScript</a></td>

<td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>

</tr>

<tr>

<td><a href="https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/" target="_blank">20 Awesome PHP Libraries</a></td>

<td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>

</tr>

</tbody>

</table>

table {

width: 600px;

border: 1px solid #505050;

margin-bottom: 15px;

color:#505050;

}

td{

border: 1px solid #505050;

padding: 10px;

}

Vấn đề xảy ra là có quá nhiều thuộc tính border ở khắp mọi nơi, lặp đi lặp lại. Và rất khó để chúng ta quản lý được border cho bảng trong trường hợp này.

Cách tốt nhất để giải quyết là thêm border-collapse: collapse vào table như sau:

table {

width: 600px;

border: 1px solid #505050;

margin-bottom: 15px;

color: #505050;

border-collapse: collapse; // line add border-collapse: collapse;

}

td{

border: 1px solid #505050;

padding: 10px;

}

Thành quả:

Thủ thuật CSS và những mẹo hay dành cho developer - Ảnh 4.

Sử dụng kebab-case

Một trong những lưu ý dành cho người mới tập làm CSS là về cú pháp:

- Các chữ trong tên class và id phải được nối với nhau bằng dấu gạch ngang (-) nếu có chứa nhiều hơn một chữ.

- CSS không phân biệt chữ hoa và chữ thường.

- Thời gian đầu, dấu gạch dưới (_) được sử dụng, nhưng ngày này không còn được hỗ trợ nữa. Thay vào đó dấu gạch ngang mới là tiêu chuẩn (-)

/* Đúng */

.footer-column-left { }

/* Sai */

.footerColumnLeft { }

.footer_column_left { }

Sử dụng comment hiệu quả trong CSS

Một trong những chìa khóa thành công của những web developer khi sử dụng CSS đó là họ sử dụng CSS linh hoạt mà vẫn quản lý chặt chẽ file CSS của mình. Để quản lý được file CSS phục vụ cho việc xem lại và chỉnh sửa code, bên cạnh việc tổ chức file CSS hợp lý thì bạn cần có thói quen sử dụng comment hiệu quả. Khi đó, nếu cần xem lại code, bạn sẽ biết mọi thứ nằm ở đâu, nó dùng để làm gì, và cần làm gì để cải thiện.

Đối với các phần quan trọng trong CSS, chẳng hạn như thành phần chính hoặc media queries, hãy sử dụng comment được cách điệu để dễ nhận ra. Ví dụ:

/*---------------

#Header

---------------*/

header { }

header nav { }

/*---------------

#Slideshow

---------------*/

.slideshow { }

Những chi tiết nhỏ và ít quan trọng hơn, hãy comment đơn giản. Ví dụ:

/* Button ở Footer */