Cách tái cấu trúc CSS - Hướng dẫn

Tái cấu trúc CSS cần phải là một phần thiết yếu của quy trình phát triển front-end, nếu chúng ta muốn có một cơ sở mã được quản lý và tối ưu hóa. Khi chúng tôi tái cấu trúc CSS, chúng tôi dọn dẹp và sắp xếp lại mã hiện có của chúng tôi không thêm bất kỳ tính năng mới hoặc sửa lỗi.

Tái cấu trúc giúp ngăn chặn sự bùng nổ CSS, cải thiện khả năng đọc và tái sử dụng mã, và làm cho CSS đẹp hơn và nhanh hơn để thực thi.

Tái cấu trúc thường là cần thiết sau một thời gian, vì ngay cả các dự án bắt đầu với một cơ sở mã ngắn gọn và có tổ chức sớm hay muộn cũng bắt đầu mất đi sự rõ ràng; tính nhất quán, quy tắc lỗi thời và các phần mã trùng lặp xuất hiện; và chúng tôi cũng bắt đầu ghi đè lên các kiểu và sử dụng ngày càng nhiều hack và cách giải quyết.

Cách tốt nhất để duy trì cơ sở mã CSS của chúng tôi là duy trì “tái cấu trúc sớm, tái cấu trúc thường xuyên” quy tắc của ngón tay cái. Trong bài đăng này, chúng tôi sẽ xem xét một số mẹo về cách chúng tôi có thể tiến hành quá trình tái cấu trúc CSS hiệu quả.

1. Thực hiện kiểm toán ban đầu

Để có một bức tranh tốt hơn về những gì chúng ta cần tái cấu trúc, đó là cách tốt nhất để bắt đầu với một cuộc kiểm toán toàn diện để xem những gì chúng ta hiện đang có.

Có rất nhiều công cụ trực tuyến tuyệt vời có thể giúp chúng ta trong nỗ lực này. CSSDig là một tiện ích mở rộng mạnh mẽ của Chrome phân tích CSS của trang web và khám phá các điểm yếu của nó, chẳng hạn như bộ chọn quá cụ thể hoặc thuộc tính lặp đi lặp lại.

CSS không được sử dụng điều tra các quy tắc CSS không được sử dụng, trong khi các công cụ linting, chẳng hạn như CSS Lint, giúp có thể nhanh chóng tìm thấy khả năng tương thích, khả năng bảo trì và các vấn đề khác.

Điều quan trọng là phải xem xét kỹ mã theo cách thủ công trong quá trình kiểm toán ban đầu, vì nhiều vấn đề ở cấp độ kiến trúc chỉ có thể được bắt gặp theo cách này.

2. Thiết lập một kế hoạch quản lý

Tái cấu trúc mã làm việc luôn là một nhiệm vụ khó khăn, nhưng chúng ta có thể giảm bớt nỗi đau nếu chúng ta tạo ra một kế hoạch về những gì chúng ta cần làm, cắt xén quá trình tái cấu trúc thành các phần có thể quản lý được và lập một lịch trình khả thi.

Trong tái cấu trúc CSS, có một điều cốt yếu mà chúng ta luôn cần xem xét: một số điều mà chúng ta tái cấu trúc, ví dụ: thay đổi tên bộ chọn, sẽ làm cho nó cần thiết để điều chỉnh mã của các tệp HTML và JavaScript có liên quan cũng.

Do đó, đó là một ý tưởng tốt để theo dõi các sửa đổi bổ sung này, chúng tôi sẽ cần phải thực hiện, và xây dựng chúng vào lịch tái cấu trúc của chúng tôi cùng với các tác vụ chính, liên quan đến CSS.

3. Theo dõi tiến độ

Trước khi bắt tay vào tái cấu trúc, đây là một bước thiết yếu để sao lưu các tập tin ban đầu của chúng tôi. Giới thiệu một hệ thống kiểm soát phiên bản, chẳng hạn như Git hoặc Subversion, vào quy trình làm việc của chúng tôi cũng có thể cải thiện đáng kể quá trình tái cấu trúc, vì chúng tôi sẽ có đăng ký về các bước tiếp theo chúng tôi đã thực hiện và chúng tôi sẽ có thể quay lại giai đoạn trước nếu chúng ta muốn làm lại mọi thứ.

4. Bám sát Hướng dẫn về kiểu mã hóa

Một hướng dẫn phong cách mã hóa mạch lạc có thể cải thiện đáng kể khả năng đọc và bảo trì mã, vì vậy trước khi chúng ta bắt đầu cấu trúc lại, nó rất cần thiết để thiết lập một hướng dẫn kiểu mã hóa CSS.

Những điều quan trọng để quyết định là:

quy ước đặt tên
quy tắc định dạng
lệnh khai
đơn vị và giá trị chúng tôi muốn sử dụng
quy tắc bình luận

Nếu chúng tôi không muốn tạo hướng dẫn về phong cách mã hóa của riêng mình, chúng tôi cũng có thể sử dụng của người khác, chẳng hạn như ThinkUp có thể tìm thấy trên Github.

Mặc dù chỉ giới thiệu một hướng dẫn về phong cách mã hóa là chưa đủ, chúng ta cũng cần phải dính vào nó khi chúng ta viết lại mã trong quá trình tái cấu trúc và mong đợi điều tương tự từ những người khác ai làm việc trong dự án của chúng tôi.

5. Thiết lập cấu trúc tệp mạch lạc

Sau khi chúng tôi sẵn sàng với các bước chuẩn bị, điều đầu tiên chúng tôi cần làm là thiết lập cấu trúc tệp CSS phù hợp, chú ý đến bản chất xếp tầng của CSS.

Nó chủ yếu phụ thuộc vào dự án cách tổ chức các tệp của chúng tôi tốt nhất, nhưng có một số quy tắc chung, chẳng hạn như sử dụng riêng bình thường hóa tập tin cho các kiểu đặt lại CSS, riêng biệt global.css cho các kiểu toàn cầu được sử dụng trên toàn bộ dự án và để lưu trữ thư viện của bên thứ 3 trong một thư mục riêng.

Nếu chúng tôi muốn chơi an toàn với cấu trúc tệp CSS của mình, thì cũng có các kiến trúc được tạo sẵn, như SMACSS hoặc ITCSS, cung cấp các kỹ thuật hiệu quả về Cách tổ chức các tệp CSS theo cách có thể mở rộng.

6. Thoát khỏi các quy tắc không sử dụng và trùng lặp

Sau một thời gian, các tệp CSS thường bắt đầu có rất nhiều quy tắc không được sử dụng mà chúng ta cần xác định và xóa sạch trong quá trình tái cấu trúc. Có nhiều công cụ trực tuyến cho phép chúng tôi điều tra các quy tắc lỗi thời, và đôi khi cũng cho phép chúng ta nhanh chóng bỏ chúng.

Công cụ nổi tiếng nhất cho mục đích này có lẽ là UnCSS, mô-đun Node.js giúp loại bỏ nhanh các quy tắc CSS không sử dụng và nó cũng cung cấp cho chúng tôi các tùy chọn cấu hình tinh vi giúp dễ dàng điều chỉnh quá trình làm sạch.

Điều quan trọng là phải tính đến việc chúng ta không nhất thiết muốn xóa các quy tắc không sử dụng khỏi tất cả các các tệp CSS chúng ta có, ví dụ từ bảng định kiểu toàn cầu, đặt lại hoặc bên thứ 3, vì vậy chúng ta cần phải loại trừ chúng trong khi thực hiện vệ sinh.

Cùng với các quy tắc lỗi thời, các quy tắc trùng lặp cũng dẫn đến sự phình to mã thừa và mất hiệu năng. Chúng tôi có thể loại bỏ chúng bằng cách sử dụng mô-đun CSS Purge Node.js, nhưng chúng tôi cũng có thể làm việc với CSS linters để tìm kiếm các quy tắc trùng lặp trong các tệp CSS của chúng tôi.

7. Giảm tính đặc hiệu

Độ đặc hiệu của bộ chọn CSS được tính từ số lượng và loại bộ chọn bên trong mà nó chứa. Độ đặc hiệu CSS được biểu thị dưới dạng một số gồm 4 chữ số dễ hiểu nhất nếu chúng ta kiểm tra máy tính xác định CSS trực quan này:

Độ đặc hiệu thấp nhất (0001) thuộc về các bộ chọn chỉ nhắm mục tiêu một thành phần HTML chung, chẳng hạn như

hoặc là

. Càng nhiều bộ chọn bên trong bộ chọn ghép, độ đặc hiệu của nó càng cao.

Một số bộ chọn, chẳng hạn như ID hoặc bộ chọn đến từ kiểu nội tuyến, có mức độ ưu tiên cao hơn vì chúng ghi đè lên kiểu thuộc về bộ chọn chung hơn. Ví dụ tính đặc hiệu của # id1 bộ chọn là 0100.

Trong tái cấu trúc, mục tiêu là giảm tính đặc hiệu của các bộ chọn (giữ chúng ngắn) càng nhiều càng tốt, càng tốt bộ chọn với độ đặc hiệu cao hơn làm giảm đáng kể khả năng sử dụng lại bộ chọn, và dẫn đến một cơ sở mã cồng kềnh.

Ba loại chính của bộ chọn độ đặc hiệu cao là:

Bộ chọn đủ điều kiện, nhu la p.group1 (xác định p ở đây không cần thiết vì nó không thể sử dụng cùng một lớp với các thành phần HTML khác)
Bộ chọn sâu, nhu la .class1. class2. class3. class4
ID, nhu la # id1

Các công cụ trực tuyến, như CSSDig được đề cập trong Bước 1, có thể được sử dụng để nhanh chóng tìm thấy các bộ chọn độ đặc hiệu cao này. Cũng có thể hữu ích khi thiết lập quy tắc trong hướng dẫn kiểu mã hóa về những thứ như mức lồng tối đa hoặc giới hạn sử dụng ID bộ chọn.

8. Loại bỏ `!quan trọng` Quy tắc

Các quy tắc CSS theo sau bởi !quan trọng tuyên bố ghi đè quy tắc phong cách thông thường. Sử dụng !quan trọng quy tắc sớm hay muộn dẫn đến mã không mạch lạc. Không phải ngẫu nhiên, hầu hết các công cụ linting đều đánh dấu chúng là lỗi.

Khi chúng ta cần viết CSS nhanh chóng, chúng ta có thể bắt đầu dựa vào chúng mặc dù vì tính đơn giản của chúng.

Vấn đề chính với !quan trọng tuyên bố là nếu chúng ta muốn ghi đè chúng trong tương lai, chúng ta cần đặt nhiều hơn !quan trọng khai báo đang sử dụng, vì vậy tốt nhất là loại bỏ chúng bất cứ nơi nào có thể trong quá trình tái cấu trúc.

9. Dọn dẹp số ma thuật và giá trị mã hóa cứng

Trong quy trình làm việc CSS hàng ngày của chúng tôi, đôi khi chúng tôi gặp phải các vấn đề chúng tôi không thể giải quyết và chúng tôi bắt đầu sử dụng cái gọi là số ma thuật, giá trị hoạt động vì một số lý do nhưng chúng tôi không hiểu tại sao. Ví dụ lấy ví dụ sau:

 .class1 vị trí: tuyệt đối; trên cùng: 28px; trái: 15,5%;

Vấn đề chính với số ma thuật là chúng hoàn cảnh, và họ là hiện thân của “lập trình bằng hoán vị” phản hạt. Trong quá trình tái cấu trúc, chúng ta cần xóa các quy tắc tùy ý này khỏi mã của mình và thay thế chúng bằng các giải pháp hợp lý hơn bất cứ khi nào có thể.

Quy tắc tương tự áp dụng cho giá trị mã hóa cứng cũng. Có lẽ sự xuất hiện thường xuyên nhất của các giá trị được mã hóa cứng có thể được tìm thấy trong các quy tắc chiều cao dòng:

 / * xấu, chúng ta sẽ cần thêm các quy tắc chiều cao dòng cố định bổ sung cho các phần tử con của. class1 * /. class1 font-size: 20px; chiều cao dòng: 24px;  / * tốt, quy tắc chiều cao dòng linh hoạt cũng có thể được sử dụng một cách an toàn bởi các phần tử con * /. class1 font-size: 20px; chiều cao dòng: 1,2;

Các giá trị được mã hóa cứng làm cho mã của chúng tôi ít bị chứng minh trong tương lai và cứng nhắc hơn, do đó, như là một phần của tái cấu trúc, chúng tôi cần phải đào chúng lên và thay thế chúng bằng các giá trị linh hoạt.

10. Đơn vị tái cấu trúc và giá trị

Để giúp bảo trì và gỡ lỗi dễ dàng hơn trong tương lai và để tránh các lỗi có thể xuất phát từ việc sử dụng các đơn vị khác nhau, chẳng hạn như em và px, đồng thời, chúng ta cần phải Bám sát các quy tắc mạch lạc về cách chúng tôi sử dụng các giá trị tương đối và tuyệt đối.

Nếu chúng ta sử dụng chúng không nhất quán trong quá khứ, chúng ta cần chuyển đổi chúng để chúng có thể tạo thành một hệ thống ngắn gọn

Nếu chúng tôi sử dụng quá nhiều màu tương tự trên trang web của mình, đó cũng có thể là một điều khôn ngoan hợp lý hóa bảng màu bằng cách giảm số lượng màu sắc chúng tôi sử dụng. (Đây là một bài viết về cách chọn bảng màu trang web một cách thực tế.)