Viết CSS không dễ dàng, bởi vì nếu không cẩn thận, bạn có thể viết mã lộn xộn, chậm chạp và mất rất nhiều thời gian để gỡ lỗi mã trong khi viết mã.

Hãy đi thẳng vào vấn đề: trong hướng dẫn này, tôi đã thu thập một số Tricks mà bạn có thể sử dụng để cải thiện hiệu suất của mình khi viết mã CSS. Bạn có thể triển khai chúng bất cứ lúc nào trên các dự án cũ hoặc mới của mình.

Chúng tôi sẽ tìm hiểu cụ thể là:

1. Bộ sưu tập tài sản

Nếu bạn nhận thấy rằng bạn đã viết cùng một thuộc tính nhiều lần, hãy xác minh rằng bạn không thể cắt bớt chúng bằng cách xóa các lớp và ID không cần thiết. Sau đó, thêm tất cả các thuộc tính chung trong một dấu ngoặc đơn.

Nếu bạn có thể liên kết các phần của mình, bạn sẽ có thể tạo một tệp hoạt động hiệu quả hơn và nó sẽ nhanh hơn nhiều.

2. Sử dụng mật khẩu cho các hằng số

Hạn chế đáng tiếc của CSS là bạn không thể định nghĩa các hằng số, như trong PHP. Các hằng số là các thuật ngữ mà bạn có thể định nghĩa một lần được sử dụng bởi phần còn lại của tập lệnh bất kể phạm vi của mã và các vùi.

Bạn có thể ngừng tạo nhiều kiểu nhiều lần để chọn một kiểu mà bạn xác định làm khối thiết kế của mình. Vì CSS không được tạo ra để lập trình trang web của bạn, nó sẽ chỉ cho phép bạn hoạt động như một nhà thiết kế nội thất, có thể nói, nó không có khả năng hỗ trợ các hằng số.

Tuy nhiên, đây là một cái gì đó sẽ thực sự hữu ích, đặc biệt là trong trường hợp gói các thuộc tính của bạn sẽ không làm được tất cả công việc cho bạn.

Những gì bạn có thể làm là tạo một ID bao gồm tất cả các kiểu bạn cần. Khi thực sự cần sử dụng, bạn chỉ cần thêm các bộ chọn cần thiết cho khai báo. Điều này sẽ giúp bạn viết mã CSS nhanh hơn nhiều.

3. Bình luận thường xuyên của bạn

Tất nhiên, CSS không hỗ trợ hằng số, nhưng điều đó không có nghĩa là bạn vẫn không thể viết tham chiếu cho những gì nếu không sẽ là hằng số. Tại sao không liệt kê các kiểu phổ biến trong một bình luận nhiều dòng?

Tùy thuộc vào bạn để xác định cách bạn sẽ nhập những nhận xét này, nhưng bạn có thể tạo một loại bảng tài liệu tương tự như bảng này:

/ * CSS 'hằng' * * Bối cảnh: #ccc9c9 * Sâu xám, văn bản: * #3a3838 nền hạnh phúc tay #e7e7e7 * * /

Điều này đặc biệt hữu ích đối với tôi, vì không phải lúc nào tôi cũng dễ dàng nhanh chóng biết chi tiết chức năng của một khối mã (Hằng số) là gì. Có một cuộc gọi lại gần đó giúp tăng tốc quá trình viết mã, vì bạn biết chính xác nơi cần tìm và bạn sẽ không phải tìm kiếm qua hàng núi CSS để tìm điểm mà bạn đã đề cập đến một kiểu nhất định.

4. Bộ chọn nhóm

Tại sao lại dừng ở đó? Trong khi bạn đang ở đó, tại sao không nhóm nhiều bộ chọn lại với nhau? Điều này sẽ giúp bạn không phải gõ nhiều lần cùng một kiểu:

h1, h2, h3, h4 p {padding: 1 em; font-family: "Times New Roman" lần, serif; } Ul .navigation, .navigation li {padding-top: 0,5 em; }

Mặc dù điều này có thể không hoạt động trong mọi trường hợp và ví dụ trên chắc chắn sẽ không áp dụng cho các nhu cầu cụ thể của bạn, nhưng nó có thể dùng như một lời nhắc nhở cho lần tiếp theo bạn viết mã và cần tiết kiệm thời gian. và trong không gian.

5. Sử dụng bộ tiền xử lý

Bộ tiền xử lý CSS là một phần mở rộng của ngôn ngữ CSS thông thường giúp bạn viết mã nhanh hơn đồng thời bổ sung nhiều tính năng khác mà bạn thường không thể thêm dễ dàng.

Các bộ tiền xử lý CSS phổ biến nhất trong WordPress là SASS và LESS, và bạn có thể học cách sử dụng cả hai.

Các bộ tiền xử lý CSS giúp công việc trở nên dễ dàng hơn rất nhiều và việc xem các nhà phát triển gắn bó với chúng đến mức nào một khi họ hiểu rõ về nó là điều khá bình thường.

6. Pseudo-classes

Như chuyên gia CSS Eric Meyer giải thích,  danh sách các kiểu liên kết theo một thứ tự nhất định là quan trọng. Nếu không, bạn có thể kết thúc với các liên kết theo kiểu không hoạt động như bạn mong đợi.

Bạn có thể chống lại điều này và tiết kiệm thời gian bằng cách không phải giải quyết loại vấn đề này trong tương lai bằng cách làm theo một thứ tự đơn giản cho các lớp giả của các liên kết. Bạn có thể nhớ thứ tự này với thiết bị sau:

a: link {tuyên bố} a: visited {tuyên bố} A: hover {tuyên bố} a: active {tuyên bố}

kiểu của các liên kết không được truy cập được đặt trước, sau đó được truy cập, trên các liên kết di chuột qua và hoạt động. Nói thật, thứ tự không thực sự quan trọng, mục tiêu là làm cho bạn nhớ sự kết hợp này một cách đơn giản nhất có thể. Thứ tự này được gọi là lớp giả "LoVe / HAte", vì các chữ cái được sử dụng trong lớp giả.

Thật không may, điều này không bao gồm lớp giả "tiêu điểm", mặc dù nó có thể được coi là lớp giả "hoạt động". Ngoài ra còn có một cụm từ dễ nhớ bao gồm lớp giả này, nó là “ LoVe Vội nhạt dần Vắng mặt ":

a: link {tuyên bố} a: visited {tuyên bố} A: hover {tuyên bố} a: focus {tuyên bố} a: active {tuyên bố}

7. Sử dụng tốc ký CSS

Nếu bạn muốn viết mã nhanh chóng và hiệu quả, nhưng không có đường cong học tập khó hơn với sự trợ giúp của bộ tiền xử lý, bạn có thể viết mã CSS. Các quy tắc dễ học hơn nhiều sẽ giúp bạn sử dụng chúng dễ dàng hơn.

Với phím tắt CSS, bạn có thể gộp nhiều dòng thành một mà không làm mất chức năng. Ví dụ: bên dưới, bạn sẽ thấy 3 dòng áp dụng cho đường viền của một phần tử:

#maincontent {border-width: 1px; border-style: rắn; border-color: black; }

Dòng này có thể đơn giản hơn nhiều:

#maincontent {border: rắn 1px đen; }

8. Sử dụng các phím tắt cho hình ảnh

Các phím tắt CSS có thể không phải lúc nào cũng là giải pháp tốt nhất cho bạn, nhưng bạn có thể áp dụng quy tắc này khi làm việc với màu sắc.

Thay vì sử dụng mã thập lục phân gồm 6 chữ số, bạn chỉ có thể sử dụng 3 chữ số.

# ffffff = #fff #1144bb #14b #ffcc44 = = #fc4

Nói cách khác, nếu bạn thấy mã màu có các cặp (giá trị thứ nhất và thứ hai, giá trị thứ ba và thứ tư và hai giá trị cuối cùng) trong đó mỗi cặp có cùng một ký tự. bạn có thể bỏ qua bất kỳ ký tự nào trong số các ký tự này cho mỗi cặp.

Sẽ mất một thời gian để làm quen với nó, nhưng sự hy sinh sẽ xứng đáng. Nếu các dạng phím tắt khác không phổ biến, bạn không cần phải lo lắng ở đây, vì các phím tắt màu gần như quen thuộc với mọi người.

9. Liên kết không cần trích dẫn và không gian

Khi bạn thêm URI vào biểu định kiểu của mình, định dạng chính xác và chính xác bao gồm các dấu cách đơn và kép và dấu ngoặc kép, như trong ví dụ này:

thân hình {
background-image: url (“Http://www.example.com/deepgray-pattern.png”);
}

Sau "url (", có một dấu cách, dấu ngoặc kép và dấu cách đóng thực tế là tùy chọn.

Để giúp bạn tiết kiệm thêm một chút thời gian và không gian, dòng này có thể được viết như sau:

thân hình {
background-image: url (Http://www.example.com/deepgray-pattern.png);
}

Bạn sẽ nhận thấy rằng khoảng trống và dấu ngoặc kép không thực sự cần thiết.

10. Phân tích CSS của bạn

Điều quan trọng làphân tích bản định kiểu của bạn sau khi hoàn thành để đảm bảo nó gọn gàng và nhẹ nhàng nhất có thể. Điều này có thể gây đau đớn, nhưng quan trọng hơn, có thể mất một thời gian để hoàn thành.

May mắn thay, có các công cụ miễn phí như Phân tích CSS, CSS Dig et CSS Vải xơ. Tất cả những gì bạn cần làm là nhập mã, chọn một số tùy chọn và nhấp vào nút để nhận ngay báo cáo cho mã CSS của bạn.

CSS Lint thậm chí còn nghiêm trọng hơn và có thể xúc phạm sự nhạy cảm của bạn nhân danh sự tiến bộ bằng cách giúp bạn cải thiện kỹ năng viết mã của mình.

Dù bằng cách nào, đây đều là những tùy chọn dễ dàng có sẵn để giúp bạn đơn giản hóaphân tích của biểu định kiểu của bạn để đảm bảo nó hợp lý nhất có thể.

Đó là tất cả cho những Tricks mà bạn có thể sử dụng cho các dự án CSS khác nhau của mình. Đừng ngần ngại cung cấp cho chúng tôi Tricks.