Làm thế nào để tìm ra kiểu css nào không được sử dụng. Công cụ dọn dẹp CSS. Đánh giá cấu trúc dự án

Lợi ích của CSS sạch và có tổ chức là rõ ràng. Một trang web có CSS ​​hoàn hảo sẽ tải nhanh hơn và hiển thị rõ hơn trong kết quả tìm kiếm. Dành cho nhà phát triển web mã sạch CSS đóng vai trò là bằng chứng rõ ràng về tính chuyên nghiệp cho khách hàng tương lai.

Tuy nhiên, việc dọn dẹp các mảnh vụn đánh dấu CSS thông qua vô số lần lặp lại và thay đổi thiết kế có thể là một quá trình tốn nhiều công sức và tốn thời gian được thực hiện bằng tay. May mắn thay, có một số điều tuyệt vời và Công cụ hữu ích, điều này sẽ giúp bạn tự động hóa một số công việc có liên quan nhất Các khía cạnh CSS. Trên trang này có các liên kết đến các công cụ dọn dẹp CSS mà cá nhân tôi đã kiểm tra Đánh dấu CSS site trên tất cả các công cụ dưới đây, tôi khuyên bạn cũng nên làm như vậy.

Công cụ dọn dẹp CSS

ProCSSor để cải thiện CSS của bạn

ProCSSor là một công cụ đơn giản, không rườm rà để cải thiện CSS của bạn ngay lập tức. Có sẵn trên OS X, iOS hoặc bất kỳ trình duyệt nào, công cụ này lấy tệp CSS, đoạn mã đã dán hoặc URL, đồng thời ngay lập tức sửa và hiển thị mã trong tương lai cho CSS của bạn.

Tìm lỗi mã nguồn CSS

Dụng cụ Kiểm tra CSS kèm theo lời giải thích về những thay đổi

CSS Lint đưa ra các đề xuất, không giống như các công cụ dọn dẹp CSS khác. Hầu hết trong số họ thậm chí không nói về những thay đổi CSS, nhưng CSS Lint đưa ra lời giải thích ngắn gọn cho từng thay đổi được đề xuất. Anh ấy có toàn bộ dòng các tính năng tập trung vào lỗi, khả năng tương thích, hiệu suất, chống trùng lặp và khả năng truy cập, có thể bật hoặc tắt.

Đánh dấu bẩn

Công cụ Dirty Markup kết hợp một số công nghệ khác nhau

Dirty Markup có một cách tiếp cận độc đáo để tối ưu hóa mã; nó hoạt động khi trường chứa đầy mã và kết hợp một số công nghệ khác nhau: HTML Tidy, JavaScript, Ace Editor và thực hiện làm sạch mã toàn diện. Nó hoạt động giống như CSS, giống như JavaScript hoặc HTML tiêu chuẩn.

CleanCSS

Công cụ CleanCSS thực hiện tối ưu CSS

CleanCSS hoạt động với một URL hoặc một đoạn mã được chèn và cung cấp nhiều cách thực thi tối ưu hóa CSS. Bạn có thể chọn giữa năm cài đặt khác nhau nén mang lại sự cân bằng giữa khả năng đọc và kích thước tệp.

Trình làm đẹp mã

Trình làm đẹp mã css đơn giản công cụ dọn dẹp

Code Beautifier là một công cụ dọn dẹp CSS đơn giản mà không có bất kỳ tính năng không cần thiết nào. Nó xử lý mã bằng URL hoặc chèn mã và làm sạch chúng một cách triệt để dựa trên nhiều tùy chọn thực tế. Nếu bạn cần nhanh chóng dọn dẹp CSS của mình mà không bị lạc trong biển tùy chọn dọn dẹp mã, đây có thể là công cụ dọn dẹp CSS lý tưởng của bạn.

Ma thuật

Spritemapper tạo các họa tiết, kết hợp nhiều hình ảnh thành một biểu định kiểu CSS

Không có công cụ nào khác đề cập đến hình ảnh được tối ưu hóa, điều này cũng hữu ích như việc tối ưu hóa chính mã đó. Spritemapper tạo các họa tiết, kết hợp nhiều hình ảnh thành một biểu định kiểu CSS c định vị đúng. Kết quả là trang web nhanh hơn, ít yêu cầu HTTP hơn và kiểu CSS hợp lý hơn.

Lớp phủ ngoài

Topcoat không phải là công cụ dọn dẹp CSS truyền thống

Topcoat không phải là công cụ dọn dẹp CSS truyền thống; đây thực chất là một bộ dành cho Phát triển CSS, một cách tiếp cận quản lý CSS thuần túy. Nếu bạn có CSS ​​được viết tốt, có thể bạn sẽ không bao giờ cần phải dọn dẹp mã CSS.

Công cụ CSSTidy chạy trên nền tảng Windows, Mac hoặc Linux.

CSSTidy tương tự như nhiều công cụ dọn dẹp CSS, nhưng công cụ này cung cấp một số thuộc tính độc đáo. CSSTidy có thể được gọi bằng dòng lệnh hoặc PHP và nó chạy trên nền tảng Windows, Mac hoặc Linux. Công cụ dọn dẹp CSSTidy có thể hoàn toàn phù hợp với quy trình làm việc hiện tại của bạn và tiết kiệm CSS sạch ngoại tuyến. Công cụ xác thực mã CSS W3C Valdiator

W3C Valdiator không cung cấp các công cụ dọn dẹp, nén hoặc tối ưu hóa mã, nhưng nó chắc chắn cần được xem xét trong trường hợp mã CSS thực sự bị hỏng. Các công cụ trên đều có công cụ riêng, công cụ này do W3C Consortium tạo ra, tạo ra các tiêu chuẩn.

Xin chào các độc giả thân mến của trang blog. Đây là một ghi chú nhỏ trong loạt bài “làm kỷ niệm”. Ý tưởng nảy sinh là loại bỏ các dòng thừa khỏi tệp kiểu. Trong bảy năm tồn tại của blog, rất nhiều thứ đã thay đổi, nhưng các dòng trong tệp STYLE.CSS vẫn còn (để đề phòng, hoặc đơn giản là tôi quên xóa chúng). Bây giờ đối với tôi, có vẻ như nó đã bắt đầu nặng quá mức, và do đó nảy sinh ý tưởng làm sạch nó.

Làm điều này bằng tay là khá khó khăn và không cần thiết. Có những con đường quá trình này tự động hóa. Một số trong số chúng không hiệu quả với tôi, một số phải trả tiền và tôi cho rằng nó không cần thiết. Cuối cùng, tôi đã sử dụng phương pháp bán tự động mà tôi sẽ viết trong vài đoạn tiếp theo. Nhìn về phía trước, tôi sẽ nói rằng chúng tôi đã cố gắng giảm gần một nửa kích thước của tệp CSS, điều này thậm chí còn làm tôi ngạc nhiên một chút.

Tùy chọn tìm các kiểu CSS không cần thiết cho website

Thay thế tệp kiểu (nội dung của nó - đã xóa tệp cũ, chèn tệp mới và sau đó lưu các thay đổi qua tệp tệp) bằng tệp mới (cắt) những thay đổi có thể nhìn thấy không gây ra bất kỳ vấn đề nào trên trang web (ít nhất là chưa, ít nhất là chưa được xác định). Nhìn chung, tôi rất hài lòng và khuyên bạn nên dùng thử. Nhanh chóng, đơn giản và thuận tiện (và cũng miễn phí).

Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog

Bạn có thể xem thêm video bằng cách vào

");">

Bạn có thể quan tâm

Cách tối đa hóa tốc độ tải trang web và tối ưu hóa tải máy chủ
CSS - nó là gì, cách kết nối các biểu định kiểu xếp tầng với mã Html bằng Kiểu và Liên kết
Tối ưu hóa và nén CSS trong Tốc độ trang- làm thế nào để vô hiệu hóa tập tin bên ngoài phong cách và kết hợp chúng thành một để tăng tốc độ tải Cách thiết lập xoay vòng màu nền hàng bảng, danh sách và những thứ khác phần tử HTML trên trang web sử dụng lớp giả thứ n-child
CSS dùng để làm gì, làm thế nào để kết nối các biểu định kiểu xếp tầng với tài liệu HTML và cú pháp cơ bản của ngôn ngữ này
Kiểu danh sách (loại, hình ảnh, vị trí) - Quy tắc CSS cho cài đặt vẻ bề ngoài danh sách trong Mã HTML
Cách để có được một trang web nhanh - tối ưu hóa (nén) hình ảnh và tập lệnh, cũng như giảm số lượng Yêu cầu http

4 trên 5

Nhiều nhà phát triển phải đối mặt với thực tế là sau một thời gian làm việc trên một dự án, trong các tệp CSS xuất hiện các phong cách mà không thể nói chắc chắn liệu chúng có được sử dụng hay không. Điều này thường xảy ra khi bạn làm việc trong một nhóm và có nhiều người cùng làm việc về phong cách. Hoặc, ví dụ, đã có một số nhà phát triển trước bạn và bạn quyết định thay đổi điều gì đó hoặc nhà thiết kế đã lên kế hoạch thiết kế lại một chút. Nói chung, có nhiều tùy chọn, nhưng kết quả là như nhau - bộ chọn "chết" được cung cấp cho trình duyệt.

Mọi thứ sẽ ổn nếu chỉ có một hoặc hai trong số chúng, nhưng nếu tệp của bạn có năm hoặc sáu nghìn dòng, thì không còn nghi ngờ gì nữa - không phải tất cả các bộ chọn đều được sử dụng, điều đó có nghĩa là bằng cách loại bỏ những bộ chọn không cần thiết, bạn có thể tạo các tệp nhẹ hơn và tăng tốc độ tải trang. Hôm nay chúng ta sẽ xem xét các chương trình khác nhau, plugin và dịch vụ để dọn dẹp các tệp CSS khỏi các kiểu không cần thiết.

Tiện ích mở rộng của Firefox

Xem xét các kiểu tài khoản có trong trang thông qua , @import và. Nó có thể phân tích cả một trang và toàn bộ trang web. Cuối cùng, bạn sẽ nhận được danh sách các bộ chọn không được sử dụng trên trang web.

Đây là tiện ích mở rộng của FireBug cho phép bạn tìm các bộ chọn không sử dụng như trên trang riêng và trên toàn bộ trang web. Kết quả là bạn sẽ nhận được danh sách tất cả các bộ chọn của mình, trong đó những bộ chọn được đánh dấu màu đỏ sẽ không được sử dụng.

Dịch vụ web

Công cụ trực tuyến để kiểm tra bộ chọn nào tập tin này không được sử dụng trên trang cụ thểđịa điểm. Nhược điểm là bạn không thể đánh giá toàn bộ trang web (hay nói đúng hơn là có thể, nhưng rất tốn thời gian và bất tiện).

Trình chỉnh sửa máy tính để bàn

Danh sách các trình soạn thảo mã bằng cách nào đó biết cách tìm các kiểu CSS không được sử dụng.

TopStyle (Thắng)

Điều này cũng có thể tìm thấy các bộ chọn được sử dụng trên các trang nhưng không có mô tả trong tệp CSS.

IntelliJ IDEA (Win, Mac, Linux)

Trình soạn thảo đa nền tảng được thiết kế chủ yếu để làm việc với Java.

Phần kết luận

Theo tôi, công cụ thành công nhất trong số này là Dust Me. Việc phân tích toàn bộ trang web chỉ mất chưa đầy một phút, sau đó bạn chỉ cần tìm và xóa các bộ chọn đã chỉ định.

Nhân tiện, nếu bạn nào sử dụng trình soạn thảo hoặc dịch vụ nào không có trong danh sách này thì hãy bình luận, tôi sẽ bổ sung. Cảm ơn tất cả các bạn đã quan tâm ;-)

Bạn vừa tham gia một dự án hiện có để thay thế một nhà phát triển sắp rời đi. Hoặc có thể họ chỉ tiếp tục dự án cũ sau vài năm. Bạn cảm thấy kinh hãi và ghê tởm khi nhìn vào đoạn mã. Chỉ có một điều bạn có thể làm: dọn dẹp toàn bộ mớ hỗn độn này. Bạn đã từng gặp điều gì đó tương tự trước đây chưa? Gần như chắc chắn, sớm hay muộn mọi người đều trải qua điều này.

Bạn biết rằng việc dọn dẹp mã CSS là một nhiệm vụ lớn. Có rất nhiều việc phải làm trong Thời gian giới hạn- đặc biệt là khi khách hàng/sếp/đồng nghiệp nhất quyết khuyên không nên động đến những gì hiệu quả. Bạn thậm chí không biết bắt đầu từ đâu.

Linting là tất cả đối với chúng tôi

Trong phần này tôi sẽ giả định rằng bạn đang sử dụng Sass. Và không chỉ bởi vì đó là một giả định hợp lý trong điều kiện hiện tại, mà còn vì việc sử dụng sai Sass thường gây ra ô nhiễm codebase. Mặc dù bài viết này sẽ hữu ích cho những người không sử dụng bộ tiền xử lý nhưng bạn nên đọc đến cuối.

Điều đầu tiên tôi thường làm khi cần hiểu cơ sở mã là linting. Linting là quá trình thực thi một chương trình tìm kiếm các lỗi tiềm ẩn và thực hành xấu. Tôi tin rằng bằng cách làm cho mã sạch sẽ, chúng tôi sẽ thực hiện bước đầu tiên hướng tới mã tốt. Từ nguyên của từ linting có thể được tìm thấy trong chủ đề này trên StackOverflow.

Sass có một kẻ nói dối được viết bằng Ruby có tên là SCSS-lint. Bạn có thể tự thiết lập hoặc tải xuống cấu hình được Sass-Guidelines đề xuất để bắt đầu ngay. Ngoài ra Node.js có sass-lint, chúng không tương thích 100% và có thể hoạt động khác nhau.

Hãy thử chạy SCSS-Lint trên thư mục tệp Sass của bạn để kiểm tra lỗi. Khả năng rất cao là hàng tấn lỗi sẽ ập đến với bạn. Thông thường sau đó bạn muốn ngừng thử nghiệm việc làm sạch mã. Kiên nhẫn. Bây giờ, bạn có thể cố gắng làm cho cấu hình bớt nghiêm ngặt hơn đối với các quy tắc không quan trọng lắm đối với bạn (chẳng hạn như định dạng màu sắc) hoặc bắt kịp xu hướng và sử dụng toàn bộ sức mạnh của linting.

Sửa lỗi tìm thấy

Đã đến lúc phải sửa những gì cần sửa. Điều này có thể được thực hiện theo hai cách. Đầu tiên là kiểm tra từng tệp một và sửa tất cả các lỗi và thiếu sót như đặt tên biến không thành công, lồng quá nhiều bộ chọn và mã được định dạng kém. Cách thứ hai (tôi thích) là sử dụng tìm kiếm và thay thế. Không biết bạn thế nào, nhưng tôi thích các biểu thức thông thường và luôn thích sử dụng chúng trong công việc của mình.

Giả sử bạn muốn thêm số 0 bị thiếu trong tất cả các số dấu phẩy động (nghĩa là từ 0 đến 1), các loại lỗi này sẽ được phát hiện bằng quy tắc LeadZero trong SCSS-lint. Để làm điều này bạn cần sử dụng để tìm kiếm biểu hiện thông thường\s+\.(\d+) (tất cả các số theo sau dấu cách có dấu chấm) và để thay thế \ 0.$1 (dấu cách, số 0, dấu chấm và số tìm thấy). Và nếu bạn lo ngại về quy tắc kẻ nói dối BorderZero, thì bạn có thể thay thế tất cả các quy tắc border: none bằng border: 0 trong trình chỉnh sửa của mình bằng cách sử dụng tìm kiếm/thay thế. Dễ như ăn bánh!

Gần đây tôi đã tạo kho lưu trữ scss-lint-regex trên GitHub để thu thập tất cả các biểu thức chính quy cho linting ở một nơi. Chắc chắn hãy xem nó nếu bạn gặp khó khăn với việc linting trong một dự án lớn. Và hãy cẩn thận với việc tìm/thay thế, đôi khi nó có thể gây ra những tác dụng phụ không mong muốn. Sau mỗi thay đổi, hãy chạy git diff để xác định những gì đã thay đổi, điều này sẽ đảm bảo rằng bạn không thêm lỗi vào mã của mình.

Khi bạn đã hoàn tất việc chỉnh sửa tìm/thay thế, bạn sẽ không thể thoát được chỉnh sửa thủ công, ở những chỗ cần chỉnh sửa (lõm sai, thiếu hoặc thừa dòng trống, thiếu khoảng trống, v.v.). Việc này mất rất nhiều thời gian nhưng sẽ giúp ích cho bạn rất nhiều trong bước tiếp theo, vì vậy điều quan trọng là phải thực hiện việc này trước khi tiếp tục.

Ghi chú của người dịch

Một số điều này có thể được thực hiện bằng cách sử dụng plugin của SassBeautify soạn thảo văn bản, ví dụ như siêu phàm hoặc nguyên tử .

Đánh giá cấu trúc dự án

Điều thực sự làm tôi khó chịu khi tham gia một dự án hiện tại là việc thiếu kiến ​​trúc dự án phù hợp. Có lẽ đã có một dự án nào đó ngay từ đầu công việc, nhưng theo thời gian, mọi thứ vượt quá tầm kiểm soát và kế hoạch ban đầu bị mất đi. Nhưng nó vẫn cực kỳ quan trọng.

Việc lựa chọn phương pháp luận của dự án không quá quan trọng, điều quan trọng là bạn có nó và không khiến bạn khó chịu. Đó có thể là SMACSS, 7-1 hoặc ITCSS - sự lựa chọn là của bạn. Cố gắng cơ cấu lại mã của bạn theo phương pháp bạn đã chọn. Tôi có xu hướng sử dụng mẫu 7-1 mà chúng tôi đã phát triển trong Nguyên tắc Sass, vì vậy tôi sẽ cung cấp cho bạn một số mẹo hữu ích nếu bạn chọn lộ trình này.

Sau đó chúng ta hãy đi đến thư mục tóm tắt. Tất cả các biến, mixin, hàm và phần giữ chỗ nên ở đây. Bạn có thể tự do sắp xếp chúng theo cách bạn muốn cho đến khi bạn xử lý được tất cả các biến và mixin trong cơ sở mã của mình. Tôi cũng xác định các biến tùy chọn (và mixin) ở giai đoạn này, vì tôi thường gặp các biến được sử dụng một hoặc hai lần.

Khi bạn đã tìm ra điều này, bạn sẽ phải quyết định cái nào trong hai cái bước tiếp theo làm điều đó sớm hơn. Bạn có thể cố gắng đảm bảo rằng tất cả nội dung của thư mục cơ sở thực sự là kiểu cơ sở chứ không phải kiểu thành phần. Hoặc kiểm tra xem thư mục bố cục có chứa mọi thứ liên quan đến bố cục trang và mã này có được ghi lại chính xác hay không.

Cuối cùng, để hoàn thành mọi thứ, bạn cần xây dựng thư mục thành phần, đây thường là một nhiệm vụ khổng lồ. Tôi khuyên bạn nên làm càng nhiều thành phần càng tốt kích thước nhỏ hơn và tập trung vào việc sử dụng chúng nhiều lần. Sẽ không thành vấn đề nếu bạn tăng số lượng chúng - miễn là chúng không có ngữ cảnh và dễ đọc, dễ hiểu và cập nhật.

Để làm ví dụ về một thành phần chính xác và nhỏ, tôi có thể đưa ra như sau:

Trích dẫn ( đệm: 10px; ) .quote__attribution ( font-size: 80%; ) .quote > :first-child ( lề-top: 0; ) .quote > :last-child ( lề-dưới: 0; )

Hãy thử suy nghĩ theo mô-đun. Ít hơn. Dễ dàng hơn. Độc lập hơn.

Loại bỏ không cần thiết

Tôi nghĩ rằng nhất một sự khác biệt lớn giữa cái xấu và CSS tốtđây là số lượng mã. CSS rất dễ phát triển. Một số người có thể thực hiện hầu hết mọi bố cục bằng cách thử và sai. Khả năng làm bất cứ điều gì bằng cách sử dụng CSS tối thiểu cần có hiệu quả và việc duy trì cách tiếp cận tối giản là một thách thức thực sự.

Đã 3 năm rồi nhưng dòng tweet này của Nicholas Gallagher vẫn là câu hỏi CSS yêu thích của tôi:

Việc ngừng sử dụng là tai họa thực sự của CSS. Khi viết các phong cách, chúng ta thường quay đi quay lại, thử các quy tắc mới - cuối cùng chúng ta thường để lại một vài tuyên bố hoàn toàn không cần thiết. Ví dụ: tràn: ẩn, không còn cần thiết hoặc font-size, không thay đổi kích thước phông chữ. Bằng cách rời bỏ chúng, chúng tôi làm tăng nợ kỹ thuật. Không có gì tốt về điều này.

Khi viết CSS, tôi thường mở các công cụ dành cho nhà phát triển trong trình duyệt và tắt từng khai báo CSS trước khi gửi mã hoàn chỉnh để kiểm tra xem chúng ảnh hưởng như thế nào. Nếu chúng không ảnh hưởng gì thì điều đầu tiên tôi tự hỏi mình là: “Tại sao chúng lại ở đây?” Nếu chúng trở nên vô dụng, tôi sẽ xóa chúng. Với kỹ thuật đơn giản như thế này, tôi có thể đảm bảo rằng chỉ có mã hữu ích và không có mã rác nào được gửi vào kho lưu trữ.

Xóa mã Cơ sở CSSđó là kỹ thuật tương tự. Xác định thành phần bạn muốn dọn dẹp, mở công cụ dành cho nhà phát triển và cố gắng tìm các khai báo vô dụng. Đôi khi, để loại bỏ mã CSS, chúng ta cần di chuyển các kiểu này lên trên cây để tận dụng các tính năng xếp tầng. Hãy xem xét điều này với ví dụ đơn giản sau:

Cha mẹ ( /* ...thứ ở đây... */ ) .child-A ( color: red; ) .child-B ( color: red; )

Sự tối ưu hóa rõ ràng là di chuyển khai báo color: red vào bộ chọn gốc và sau đó để phân tầng thực hiện phần còn lại cho chúng ta. Chắc chắn, ví dụ thực tế thường phức tạp hơn, nhưng ví dụ này cũng cho thấy rằng bạn không nên quên các khả năng của chữ “C” trong từ viết tắt CSS.

CSS rất thông minh và bạn cũng nên thông minh như vậy

Việc thiếu hiểu biết về ý nghĩa của các từ kế thừa, ban đầu và màu hiện tại cũng rất phổ biến. Giả sử bạn muốn các liên kết có cùng màu với văn bản chính (chúng đã được gạch chân khá nhiều). Đây là cách không làm điều đó:

A (màu: đen; /* Không */ )

Lý do giải pháp này thất bại rất rõ ràng: nếu bạn thay đổi màu thân, màu liên kết sẽ không đồng bộ với nó. Nếu bạn nghĩ đến việc sử dụng một biến, nó sẽ chỉ khiến mọi thứ trở nên phức tạp không cần thiết. Và cuối cùng, nếu liên kết được đặt bên trong một phần tử có phong cách riêng(ví dụ: trong một trích dẫn), nó sẽ không khớp với màu của nó.

CSS có sẵn một cách để giải quyết vấn đề này, đó là giá trị kế thừa:

A ( màu: kế thừa; /* Yay! */ )

Tương tự, khi trả lại một thuộc tính về giá trị mặc định của nó, sẽ là một ý tưởng tồi nếu đặt giá trị cố định. Trong CSS có một giá trị ban đầu cho những trường hợp như vậy. Thông thường nó không khác gì việc đặt các giá trị cố định, nhưng có những trường hợp nó thực sự đóng một vai trò nào đó, chẳng hạn như khi xác định hướng của văn bản trong thuộc tính căn chỉnh văn bản. Khi đặt lại text-align , giá trị left có thể làm hỏng văn bản trong các ngôn ngữ RTL (từ phải sang trái), đầu ra sẽ là giá trị ban đầu (thậm chí tốt hơn là start , nhưng giá trị này không được hỗ trợ trong IE9)/.

Cuối cùng trong danh sách, nhưng không kém phần quan trọng là currentcolor, nhiều nhà phát triển không biết về nó. Nếu bạn là một trong số họ, đừng lo lắng, hãy tự hỏi: “Nếu bạn không đặt màu đường viền cho các phần tử thì tại sao nó lại tự động khớp với màu phông chữ của phần tử đó?” Có, điều này xảy ra vì theo mặc định, thuộc tính border-color được đặt thành currentcolor (thông số kỹ thuật). Đồng ý, mọi thứ đều rõ ràng ngay từ cái tên.

Theo tôi, nếu bạn muốn sử dụng màu phông chữ của một phần tử, bạn nên sử dụng currentcolor thay vì giá trị cố định hoặc biến Sass.

Phần tử ( color: deeppink; border: 1px Solid; /* Màu được ẩn với `currentcolor` */ ) .element svg ( fill: currentcolor; /* Màu tô sẽ giống như văn bản */ )

Đây là tất cả khả năng cơ bản CSS. Họ tạo ra CSS theo cách nó vốn có. Và những cơ hội này hiếm khi được sử dụng một cách đáng ngạc nhiên. Vì vậy, nếu quyết định cải thiện mã thành phần thì bạn không nên bỏ qua chúng.

Git của bạn sẽ ổn

Tái cấu trúc một cơ sở mã CSS là rất nhiều công việc. Bạn sẽ phải cập nhật hàng tá tập tin. Và rất có thể bạn sẽ làm vỡ thứ gì đó trong quá trình này. Hãy thành thật mà nói - mọi người đều mắc sai lầm và sẽ vô cùng tuyệt vời nếu bạn hoàn thành công việc như vậy mà không mắc một sai sót nhỏ nào.

Vì vậy, tôi thực sự khuyên bạn nên làm việc chăm chỉ với hệ thống kiểm soát phiên bản của mình (điều hợp lý là cho rằng Git đóng vai trò này). Điều này có nghĩa là tất cả các lần xác nhận đều thực hiện một việc duy nhất - đảm bảo rằng bạn quay lại một bước so với mã có lỗi mà không gặp phải xung đột.

Tôi biết rằng nhiều người thấy Git phức tạp và khó hiểu, và những cách để học nó dễ dàng nằm ngoài phạm vi của bài viết này. Hãy tin tôi đi: lịch sử Git của bạn sẽ giống như một bài thơ nếu bạn không muốn bộ não của mình sôi sục.

Phần kết luận

Vì vậy, tôi sẽ trình bày ngắn gọn những ý chính của bài viết cho những ai lười đọc toàn bộ văn bản:

Việc dọn dẹp một dự án CSS/Sass rất khó vì khó đánh giá ngay toàn bộ tác động của một thay đổi hoặc xóa. Chuỗi CSS. Tất cả điều này chủ yếu là do khả năng kiểm tra CSS kém. Vì vậy bạn cần phải cẩn thận.

Bắt đầu với linting và mã của bạn sẽ trở nên đẹp hơn. Hãy làm điều này vì nó sẽ giúp cuộc sống của bạn dễ dàng hơn trong tương lai. Nó giống nhau cách tốt tổng quan về trạng thái mã của bạn mà không gặp nhiều rủi ro (việc sửa lỗi cú pháp sẽ không gây ra bất kỳ vấn đề nào).

Sau đó cấu trúc dự án của bạn theo phương pháp bạn đã chọn. Cho dù bạn chọn cái nào, điều quan trọng là bạn phải tuân theo nó. Nếu dự án của bạn không có quá nhiều thành phần thì cấu trúc sẽ khởi đầu tốt. Tìm các phần có thể tái sử dụng của giao diện và chuyển kiểu của chúng sang tập tin riêng biệt. Hãy thoải mái viết tài liệu, điều này sẽ làm cho quá trình trở nên dễ dàng hơn và bạn sẽ cảm thấy như mình đang tiến về phía trước.

Khi bạn đã dọn dẹp dự án của mình và sắp xếp tất cả các thành phần, đã đến lúc cải thiện CSS. Trước tiên hãy kiểm tra xem bạn có thể xóa những gì vì chúng tôi luôn viết quá nhiều mã. Sau đó hãy cố gắng tối ưu hóa nó để nó ít lặp lại hơn. Đừng làm quá sức! Công việc của bạn là giảm độ phức tạp chứ không phải tăng nó. Đừng quên bình luận về bất cứ điều gì mà thoạt nhìn không rõ ràng.

Và cuối cùng, các cam kết của bạn phải thường xuyên và hợp lý. Kết hợp các thay đổi thành các cam kết nhỏ, mỗi lần thực hiện một cam kết nhỏ điêu đơn giản- điều này sẽ giúp bạn dễ dàng khôi phục các thay đổi hơn nếu bạn làm sai điều gì đó.

Cuối cùng nhưng không kém phần quan trọng, đừng quên ăn mừng khi mọi chuyện kết thúc. Chúc may mắn!

Từ tác giả: Thật khó để nói về phong cách nguyên khối, vì thông thường, Tệp CSS thường sưng lên. Việc xóa các kiểu CSS không sử dụng sẽ giúp mọi thứ được kiểm soát. Trước khi chúng ta bắt đầu tìm kiếm các kiểu không được sử dụng, cần lưu ý rằng có nhiều chiến lược khác để viết các kiểu có thể duy trì được. Phong cách của chúng tôi có thể được chia thành các phần hợp lý (bố cục trang, nút, lưới, tiện ích, v.v.) và sử dụng hệ thống đặt tên rõ ràng (ví dụ: BEM). Thông thường, các nhà phát triển thực hiện việc này trước khi tìm kiếm các quy tắc không được sử dụng. Tôi nghĩ điều này đúng vì phong cách có tác động lâu dài.

Một lý do khác khiến các quy tắc không được cắt bớt thường xuyên là việc tìm và xóa các kiểu không sử dụng trong bất kỳ thứ gì lớn hơn một dự án web nhỏ sẽ bất tiện. Nếu nội dung không tĩnh, làm sao bạn biết quy tắc nào đang được sử dụng và ở đâu?

Công cụ dành cho nhà phát triển Chrome

Hóa ra là trong các công cụ Nhà phát triển Chromeđã có sẵn chức năng rồi. Tôi đã thử nghiệm nó trên một trang web mà tôi biết có rất nhiều kiểu có thể xóa được. Cảm xúc lẫn lộn. Rào cản gia nhập rất thấp, đặc biệt đối với các nhà phát triển đã làm việc với Bảng điều khiển dành cho nhà phát triển Chrome. Bạn không cần phải cài đặt bất cứ thứ gì, nó rất tuyệt.

Những gì bạn cần làm để kiểm tra kiểu trên trang web:

Mở trang web bạn quan tâm

Mở bảng dành cho nhà phát triển

Chuyển đến tab kiểm tra

Chọn tùy chọn Hiệu suất Trang Web và chạy

Một số kết quả sẽ cho biết “Xóa các quy tắc CSS không được sử dụng”. Nếu không, thì bạn không có bất kỳ kiểu nào chưa được sử dụng. Chúc mừng! Kết quả được chia theo phong cách. Sự phân tích không chỉ theo tệp mà còn theo khối kiểu. Thật sự tính năng hữu ích, vì chúng tôi chỉ cần những kiểu mà chúng tôi đã viết. Ít nhất là cho mục đích của bài viết này.

Liệu nó có tốt không?

Tôi không thấy tuyệt vời cách đơn giản xuất kết quả từ Chrome. Bạn có thể sao chép trực tiếp từ một khối, nhưng trước tiên bạn cần mở rộng nó. Điều này làm cho việc phân tích kết quả hơi khó xử. Việc chạy thử nghiệm trong trình duyệt khiến chúng tôi không thể làm việc với mã, điều này có thể dẫn đến việc chúng tôi quên kiểm tra trang web.

Kết luận: Hữu ích cho người mới bắt đầu nhưng không phải là giải pháp lâu dài.

UnCSS

Bạn có thể sử dụng các công cụ dòng lệnh để tìm các kiểu không sử dụng. UnCSS là một ví dụ thú vị. Nó kéo trang thông qua phantomJS và bắt các kiểu được chèn thông qua JS. Tôi thực sự muốn dùng thử công cụ này vì nó đã giải quyết được vấn đề của tôi vì Thanh công cụ dành cho nhà phát triển Chrome hoàn toàn không phải về chỉnh sửa mã. Với UnCSS, kết quả có thể được lưu trực tiếp vào một tệp, thật hoàn hảo.

Cài đặt

Tôi không thể chạy npm install uncss trên Ubuntu. Không có gì nghiêm trọng cả, hóa ra tôi đã quên mất một vài phụ thuộc. Lệnh cài đặt thư viện còn thiếu mà tôi đã chạy:

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get cài đặt libfontconfig1 libfontconfig1-dev

sudo apt - nhận bản cập nhật sudo apt - nhận bản dựng cài đặt - chrpath libssl thiết yếu - dev libxft - dev sudo apt - cài đặt libfreetype6 libfreetype6 - dev sudo apt - cài đặt libfontconfig1 libfontconfig1 - dev

UnCSS có thể được tích hợp vào quá trình xây dựng, nhưng bây giờ chúng ta sẽ bỏ qua điều đó. Tôi nghĩ việc chèn nó vào quá trình xây dựng không phải là tốt nhất ý tưởng tốt. Addy Osmani có về chủ đề này bài báo hay. Lý tưởng nhất là chúng tôi muốn loại bỏ trực tiếp các kiểu không được sử dụng khỏi mã thay vì chỉ lọc chúng cho sản phẩm cuối cùng.

Có lẽ, lối thoát tốt nhất- làm tất cả. Đầu tiên, hãy chạy nó như một bước dựng sẵn để tối ưu hóa mã. Thứ hai, chạy bước xây dựng để tối ưu hóa các kiểu mà bạn không kiểm soát.

Sử dụng dòng lệnh

uncss http://your-site.foo/ > không sử dụng-styles.css

uncss http: //your-site.foo/ > không sử dụng-styles.css

Kết quả được chia thành các kiểu trang web your-site.com và trình duyệt Chrome, nhưng được lưu trữ trong một tập tin. Trang web của tôi có phông chữ tuyệt vời và tất cả các biểu tượng không được sử dụng trên trang chủ, kết thúc ở đầu ra UnCSS. Bây giờ nó không còn quan trọng với tôi nữa. Chúng có thể được ẩn bằng cách chạy lại lệnh và chỉ định ignSheets.

Lưu ý rằng ignSheets có thể chấp nhận một chuỗi (URL đầy đủ của kiểu bị bỏ qua) hoặc một biểu thức chính quy. Biểu thức chính quy dễ dàng hơn vì có ít ký tự hơn và nó bao gồm những thay đổi có thể xảy ra trong đường dẫn tệp.

Bỏ quaSheets /.*font-awesome.min.css/

Đây là thông báo lỗi bật lên khi trang hết thời gian chờ. Có thể tăng thời gian chờ bằng cách sử dụng -t N, trong đó N là số mili giây (không đặt –t 360 và sau đó thắc mắc tại sao mã không đợi 5 phút).

Kết luận: UnCSS thuận tiện hơn vì nó gần nơi tôi chỉnh sửa style hơn. Tệp đầu ra rất hữu ích trong việc loại bỏ các kiểu không cần thiết. Tôi thấy việc sử dụng nó là do tùy chọn –includeSheets, tùy chọn này tự động bỏ qua mọi thứ nằm trong biểu thức chính quy. Ví dụ: thuận tiện cho các trang web WordPress, nơi nhiều plugin khác nhau có thể điều chỉnh kiểu của chúng, nhưng nhà phát triển chỉ cần kiểu chủ đề style.css, v.v.

Tôi nên sử dụng công cụ nào?

Lúc đầu mình chọn UnCSS và thuận tiện dòng lệnh. Tuy nhiên, trong khi viết bài này, tôi đã thử chúng trên một vài trang web khác và nhận được kết quả ít hứa hẹn hơn. Đặc biệt, tôi có một số trang web được tạo cách đây vài năm sử dụng một khung có liên quan đến các nhận xét vĩnh viễn /*!**…*/. Chúng không hoạt động tốt với PostCSS và do đó không hoạt động tốt với UnCSS. Tôi chưa đi sâu vào vấn đề, nhưng có lẽ nhiều hơn Một phiên bản mới PostCSS tha thứ cho những bình luận như vậy. Tuy nhiên, hiện tại điều này đã trở thành một rào cản khác và tôi không thể sử dụng hoàn toàn UnCSS trong công việc của mình.