Xóa tất cả các kiểu css trong tệp html. Đặt lại kiểu bằng CSS Reset

Xin gửi lời chào đến tất cả độc giả của bài viết hiện tại, cũng như những người đăng ký blog giáo dục của tôi. Có thể bạn đã nhiều lần gặp phải sự cố khi đánh dấu kiểu được thực hiện hoàn hảo, nhưng mặc dù vậy, các trang vẫn hơi khác nhau. Để ngăn điều này xảy ra, tôi sẽ cho bạn biết nó là gì dọn dẹp css phong cách.

Sau khi đọc ấn phẩm này, bạn sẽ tìm hiểu lịch sử của công nghệ này, phân tích một số kiểu làm sạch kiểu dáng và cũng có thể củng cố kiến ​​thức mới của mình bằng cách phân tích các ví dụ về mã. Bây giờ chúng ta hãy bắt tay vào công việc!

Công nghệ CSS Reset xuất hiện như thế nào và cách sử dụng nó

Đặt lại CSS là danh sách các thuộc tính xếp tầng tờ phong cách, đặt lại các tiêu chuẩn được lập trình trong trình duyệt về mặc định.

Kỹ thuật này cho phép bạn tạo một dịch vụ web phổ quát trông giống nhau bất kể thế nào và sẽ giúp bạn loại bỏ các kiểu không sử dụng.

Ngày nay, có nhiều tùy chọn để triển khai thư viện reset hoặc chúng cũng có thể được gọi là framework.

Tôi tin rằng mọi nhà phát triển ứng dụng web có lòng tự trọng nên có một khung thiết lập lại được tùy chỉnh cho riêng họ. Đây có thể là một trong những tệp được tạo sẵn hoặc có thể là tệp đặt lại do chính bạn tạo.

Về lịch sử, lần đầu tiên công nghệ tương tựđược Crespanis Andrew sử dụng vào năm 2004. Trong các ấn phẩm kỹ thuật của mình, ông khuyên các nhà thiết kế bố cục nên sử dụng bộ chọn đa năng, I E. *, và trong đó, đặt lại thụt lề đối tượng được đặt mặc định trong mỗi trình duyệt.

Việc triển khai phần mềm của kỹ thuật này trông như thế này:

Một ví dụ về cách thức hoạt động của phương pháp tiếp cận của E. Crespanis

Nếu chạy ví dụ, bạn có thể thấy khối này nằm gần góc trên bên trái.

Như tôi đã nói, có nhiều giải pháp để thiết lập lại các biểu định kiểu xếp tầng được viết trong trình duyệt. Tôi đã mô tả phương pháp đầu tiên ở trên. Có hai tùy chọn đặt lại đơn giản hơn, khác với giải pháp của Crespanis chỉ ở một số thuộc tính bổ sung.

Do đó, một trong những cách tiếp cận sử dụng thêm zeroing cho tất cả các ranh giới của các đối tượng web (thêm dòng đường viền: 0;) và mặt khác - đặt lại các tham số của đường viền và đường viền bên ngoài của các phần tử (được thêm vào tùy chọn đầu tiên phác thảo: 0; đường viền: 0;).

Tuy nhiên, tất cả chúng đều có một số nhược điểm. Vì đây là phiên bản đầu tiên của kiểm soát kiểu trình duyệt nên chúng không hoàn hảo. Lấy ngay cả một văn bản với các đoạn văn. Khi sử dụng lần thực hiện reset đầu tiên, khoảng thụt lề giữa các đoạn văn sẽ biến mất. Trong trường hợp này, đánh dấu CSS sẽ phải được điều chỉnh mỗi lần.

Vì vậy, nhiều chuyên gia web và chuyên gia CNTT tiếp tục cải tiến hướng đi mới. Vì vậy, Eric Meyer đã tiến hành một loạt nghiên cứu, nghiên cứu nhiều tác phẩm được viết vào thời điểm đó và tạo ra công cụ đắc lựcđược gọi là Đặt lại CSS.

Cẩn thận! Mafia mạng! Sẽ giết chết mọi tiêu chuẩn phong cách trình duyệt!

Vậy chúng ta có gì với CSS Reset? Quyết định này không sử dụng bộ chọn chung mà đặt đánh dấu kiểu thông qua các thẻ. Đồng thời, mã cung cấp khả năng xử lý các khu vực “có vấn đề”, chẳng hạn như sập viền, không hoạt động tốt trong một số trình duyệt.

Tôi muốn lưu ý một chi tiết quan trọng: việc đặt lại đánh dấu kiểu phải được thực hiện trước khi thiết lập các thuộc tính khác, vì css xử lý các quy tắc kiểu theo thứ tự và ghi đè các giá trị của tham số được chỉ định nhiều lần cho cùng một thẻ.

Hãy quay lại với Eric Meyer và CSS Reset của anh ấy. Trong giải pháp của mình, ông đưa ra các quy tắc cho hầu hết các phần tử ngôn ngữ css, bắt đầu từ các thùng chứa và kết thúc bằng các thẻ nhỏ như strong, var, mark và các thẻ khác. Đây là phiên bản thứ hai chính thức của tài liệu này: http://meyerweb.com/eric/tools/css/reset/index.html

Sau khi xuất hiện tùy chọn được mô tả ở trên để điều chỉnh thiết kế trang web “một kích thước phù hợp với tất cả” trong tất cả các trình duyệt, nhiều công ty lớn đã tạo ra các sửa đổi của riêng họ.

Ví dụ: Yahoo! đã tạo Đặt lại CSS YUI mà họ cung cấp miễn phí (bạn có thể xem nó tại liên kết này: http://yui.github.io/yui2/#start).

Chris Poteet và những người cùng chí hướng đã phát triển CSS Browser Reset của Siolon ( http://www.siolon.com/blog/browser-reset-css/). Và điều này có thể tiếp tục trong một thời gian rất dài.

Ở đây tôi muốn liệt kê một số quy tắc quan trọng và khuyến nghị sử dụng CSS Cài lại:

1. Như tôi đã nói, điều đầu tiên cần làm trong mã css là đặt lại các tham số. Mặc dù điều này là trực quan nhưng rất thường xuyên những người mới bắt đầu và các nhà phát triển có kinh nghiệm vấp phải lỗi này;
2. Việc sử dụng một tài liệu CSS riêng cho CSS Reset được coi là một cách thực hành tốt. Ngoài ra, một tập tin như vậy sẽ trở thành công cụ phổ quát nhà phát triển và có thể được sử dụng trong các dự án web khác nhau;
3. Đừng ngại thực hiện các sửa đổi cá nhân hoặc tạo khung thiết lập lại của riêng bạn;
4. Cố gắng không sử dụng một cách mù quáng giải pháp làm sẵnđể đặt lại kiểu và sau đó xác định lại một số tham số. Điều này đe dọa sự dư thừa mã. Và dân IT không thích điều này. Do đó, trong trường hợp Yahoo CSS Reset, nếu bạn cần căn giữa và không căn lề trong các thuộc tính: caption, th (text-align: left;), thì cứ thoải mái viết từ khóa trung tâm.

Đối với tôi, tôi sử dụng CSS Reset bao gồm các bước cơ bản quy tắc chung mẫu và sửa đổi của tôi.

Điều này kết thúc bài viết. Tôi sẽ biết ơn nếu bạn đánh giá cao công việc của tôi và cũng gia nhập hàng ngũ những người đăng ký của tôi. Đừng quên chia sẻ liên kết tới blog của tôi với bạn bè và đồng nghiệp của bạn. Chúc may mắn!

Tạm biệt!

Trân trọng, Roman Chueshov

Đọc: 114 lần

Từ tác giả: Khá khó để nói về các phong cách nguyên khối, vì thông thường, các tệp CSS thường bị cồng kềnh. 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à được sử dụng hệ thống rõ ràngđặt tên (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 một tùy chọn Trang web Hiệu suất 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. Qua ít nhất, trong phạm vi 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ì Bảng điều khiển dành cho nhà phát triển Chrome hoàn toàn không liên quan đến 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

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ó một bài viết hay về chủ đề này. Lý tưởng nhất là chúng tôi muốn xóa trực tiếp các kiểu không 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

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 biểu hiện thông thường. Sẽ dễ dàng hơn với biểu thức chính quy 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 đến tập tin.

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.

Sớm hay muộn, mọi giao diện người dùng (người thiết kế bố cục) đều phải đối mặt với nhiệm vụ kiểm tra toàn bộ trang web để tìm các quy tắc CSS không được sử dụng. Điều đầu tiên bạn nghĩ đến là lên Google và tìm một số dịch vụ hoặc chương trình sẽ thực hiện tất cả công việc bẩn thỉu cho chúng ta.

Tóm lại, tôi đã đổ mồ hôi và tìm ra các giải pháp sau:

• Dịch vụ thanh toán không sử dụng-css.com
• Bộ chọn DustMe - Tiện ích mở rộng FireBug cho Mozilla
• Cách sử dụng CSS - Tiện ích mở rộng FireBug cho Mozilla

Về dịch vụ trả phí, bạn sẽ vào trang web, nhập địa chỉ trang web để xác minh và nhấn OK. Họ sẽ viết thư cho bạn rằng kết quả sẽ đến qua email, cuối cùng sau một ngày một lá thư sẽ đến, rằng đã có kết quả và có thể tải xuống từ liên kết (đi và bạn sẽ được yêu cầu thanh toán để tải xuống kết quả kiểm tra). Nhưng chúng tôi không tìm kiếm những cách trả phí dễ dàng và chúng tôi muốn có thể tự mình làm mọi việc, vì vậy chúng tôi sẽ giao kết quả trả phí cho người khác.

Vậy hãy bắt đầu với những gì phần mềm chúng tôi sẽ cần nó. Trước hết chúng ta cần Mozilla Firefox. Sau khi Firefox được cài đặt, chúng tôi triển khai tiện ích bổ sung FireBug vào đó.

Bộ chọn bụi cho tôi

Tiện ích bổ sung Dust Me Selectors không có trong danh mục chính thức của các tiện ích bổ sung cho trình duyệt; bạn có thể cài đặt nó bằng cách nhấp vào liên kết và nhấp vào nút Cài đặt ngay (tất nhiên, bạn cần mở liên kết bằng FireFox). Chúng ta đã cài đặt tiện ích bổ sung, khởi động lại trình duyệt và biểu tượng cây chổi màu hồng sẽ xuất hiện ở góc dưới bên phải.

Sau khi tiện ích mở rộng quét trang, một cửa sổ sẽ mở ra với ba tab Bộ chọn không sử dụng (quy tắc không sử dụng), Bộ chọn đã sử dụng (quy tắc được sử dụng) và Nhật ký nhện (quét trang web nhện). Có hai nút ở phía dưới: lưu tài liệu và xóa kết quả quét.

Bây giờ nói thêm một chút về nhật ký Spider. Bạn cần nhập địa chỉ trang web hoặc địa chỉ sơ đồ trang web và nhấp vào GO! Về lý thuyết, mọi thứ đều rõ ràng và mọi thứ sẽ hoạt động, nhưng dù tôi có muốn kết quả đến mức nào thì kết quả cũng không như ý, hay nói đúng hơn là có thể quét vài trang và phần bổ sung bị kẹt, điều này rất buồn , trong một từ, một loại thất bại. Tác giả tuyên bố rằng để tiện ích bổ sung hoạt động, bạn cần Phiên bản Mozilla 1.5 trở lên (đây cũng là một trò lừa đảo [hee] Tôi đã cài đặt nó, vâng, mọi thứ đều hoạt động, nhưng vẫn không như mong muốn). Về nguyên tắc, đây là điểm tiêu cực duy nhất và quan trọng nhất, vì cần phải kiểm tra toàn bộ trang web, nhưng việc kiểm tra mất khá nhiều thời gian (tôi đã lãng phí nửa ngày cho thứ rác rưởi này). Điều tích cực nhất là nếu bạn nhập tên trang web, tiện ích bổ sung sẽ xây dựng sơ đồ trang web và chúng tôi sẽ cần nó cho tiện ích bổ sung tiếp theo Cách sử dụng CSS, vì vậy hãy nhớ lưu sơ đồ trang web.

Về nguyên tắc, nếu bạn cần kiểm tra một trang thì tiện ích mở rộng này sẽ giúp bạn một cách hoàn hảo, tôi sẽ lưu ý một điểm trừ nữa là mỗi khi bạn mở tiện ích bổ sung, trang đó sẽ được quét liên tục, tóm lại, việc quản lý tiện ích mở rộng là không thuận tiện lắm nên tôi đã từ bỏ nó.

Cách sử dụng CSS

Bạn có thể tìm thấy tiện ích bổ sung Sử dụng CSS trong danh mục chính thức tại đây. Cho đến gần đây, để tiện ích mở rộng hoạt động, bạn phải cài đặt Phiên bản Firefox 3.6.25, và tại thời điểm viết bài, Tác giả dường như đã thức tỉnh hoặc tỉnh táo và cập nhật phần bổ sung nên các bạn có thể đặt cược vào phiên bản mới nhất của Mozill. Sau khi bạn cài đặt tiện ích bổ sung này và khởi động lại trình duyệt của mình, vui lòng truy cập trang web bạn muốn kiểm tra và ngay khi trang tải xong, vui lòng nhấn nút F12 (cửa sổ FireBug sẽ mở) và ở đó bạn sẽ thấy tab CSS Cách sử dụng:

Để kiểm tra trang để tìm các quy tắc không được sử dụng, bạn cần nhấp vào nút Quét (quá trình quét mất 30 giây hoặc thậm chí ít hơn). Thoạt nhìn, có vẻ như tiện ích mở rộng này chỉ quét một trang; bạn hỏi phải làm gì với các trang còn lại. Hãy nhớ rằng, chúng tôi đã lưu sơ đồ trang web bằng tiện ích mở rộng Dust Me Selectors, tuy nhiên, nếu trang web bạn đang kiểm tra có sơ đồ trang web html thì tốt hơn nên sử dụng nó, nhưng nếu nó không tồn tại, hãy tạo một sơ đồ trang web trang mới trang web và chèn sơ đồ trang web từ tiện ích mở rộng Dust Me Selectors (nếu không thể tạo trang mới thêm về điều đó bên dưới).

Bây giờ tôi sẽ mô tả chuỗi hành động quét:

1. mở sơ đồ trang web html
2. nhấn F12 - FireBug mở ra
3. đi tới tab Sử dụng CSS
4. nhấn nút Tự động quét
5. làm mới trang (nhấn F5)

Kết quả là chúng tôi đã nhận được trang được quét đầu tiên. Bạn có thể lưu kết quả hoặc có thể tiếp tục quét. Tôi đề nghị bạn tiếp tục. Thật dễ dàng để tiếp tục quét, chúng tôi không cần phải chọn bất cứ thứ gì (vì chúng tôi đã chọn các trang quét tự động), mà chỉ cần theo liên kết đầu tiên trong sơ đồ trang web (không cần mở liên kết trong cửa sổ mới, mọi hành động phải diễn ra trong một cửa sổ).

Ở phần đầu của trang được quét, các ký hiệu sau được chỉ định:

• Dòng - dòng quy tắc
• Bộ chọn CSS - Quy tắc CSS
• Đã thấy - Quy tắc CSS được sử dụng (màu xanh nhạt)
• Đã thấy trước đây - Các quy tắc CSS đã được sử dụng trước đây (có màu xanh đậm)
• Không Thể Nhìn Thấy - CSS không được sử dụng quy tắc (màu đỏ)
• :hover - Quy tắc CSS cho các phần tử nhận được tiêu điểm (chuyển sang màu xám)
• (2 scan) - hiển thị số lần scan (nếu scan 1 trang thì số sẽ là 1)
• xuất css đã được làm sạch - lưu kết quả quét

Bạn có thể tiếp tục quét, mặc dù bạn sẽ phải quay lại sơ đồ trang web (điểm trừ đầu tiên). Không cần phải bấm vội, quan trọng là trang tải xong, bạn sẽ thấy thao tác quét tự động (tức là kết quả quét sẽ hiển thị trong cửa sổ FireBug).

Tiện ích mở rộng kiểm tra tất cả các tệp kiểu được bao gồm. Nếu có nhiều quy tắc CSS trên trang web, bạn sẽ phải cuộn bánh xe để xem kết quả quét:

Kết quả này được đưa ra sau mỗi tệp kiểu, nếu có nhiều hơn một tệp kiểu.

Khi tất cả các trang đã được quét, nhấp vào liên kết xuất css đã được làm sạch, kết quả sẽ mở trong một tab mới, chọn mọi thứ và lưu vào tệp có phần mở rộng .css, thẻ UNUSED sẽ được chỉ định trước mỗi quy tắc không được sử dụng:

Nhược điểm thứ hai của phương pháp quét này là phần mở rộng này không quét các cửa sổ bật lên (phương thức) của trang web, thật đáng tiếc, vì vậy bạn sẽ phải sao chép các quy tắc CSS cho các cửa sổ phương thức.

Mặc dù có 2 nhược điểm nhưng theo mình thì cái này ngầu nhất một phương pháp kiểm tra tệp biểu định kiểu để tìm các quy tắc CSS không được sử dụng, tồn tại đến ngày nay.

Tôi đã sử dụng nó để tối ưu hóa hai tệp kiểu có tổng trọng lượng 360Kb - 18.000 dòng, tôi đã rất sốc khi nhìn thấy nó. Sau tất cả các công việc sử dụng phương pháp này, kết quả là một tệp kiểu - 90Kb và 1100 dòng, mọi người đều hài lòng với kết quả và tôi cũng vậy. Đúng là phải mất một thời gian dài để tìm ra giải pháp, lần sau mọi thứ sẽ nhanh hơn rất nhiều, điều đó thật dễ chịu.

Tôi gần như quên mất. Phải làm gì nếu không thể tạo trang bằng sơ đồ trang web? Trong trường hợp này, bạn sẽ phải chèn từng liên kết từ sơ đồ trang web vào thanh địa chỉ theo cách thủ công và mọi thứ sẽ hoạt động tốt.

Và nhân tiện, nếu bạn đã chọn hệ thống quản lý trang web WordPress, thì trong bài viết này bạn có thể tìm hiểu cách tạo sơ đồ trang web cho nó.

Tôi cũng sẽ lưu ý rằng dịch vụ trả phí sẽ gửi kết quả quét trong vòng 24 giờ và nếu trang web (tài nguyên) của bạn có 10 hoặc 20 mẫu trang thì việc kiểm tra của bạn sẽ mất ít thời gian hơn nhiều so với thời gian bạn chờ đợi kết quả từ chúng. Tuy nhiên, nếu trên trang web số lượng lớn các trang và các mẫu khác nhau được sử dụng cho chúng, tất nhiên bạn nên trả khoảng 25 USD cho một dịch vụ như vậy.

Tôi hy vọng bạn thấy phương pháp kiểm tra tệp kiểu này của mình hữu ích.

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 hãy giảm kích thước tập tin CSS Tôi đã thành công gần như hai lần, điều này thậm chí còn làm tôi ngạc nhiên đôi chút.

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

Việc thay thế tệp kiểu (nội dung của nó - Tôi đã xóa tệp cũ và chèn tệp mới, sau đó tôi lưu các thay đổi qua Filezilla) bằng một tệp mới (bị hỏng) không gây ra bất kỳ thay đổi rõ ràng nào trên trang web (ít nhất là chưa , không được tiết lộ). 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! Hẹn gặp lại bạn sớm 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 - cách tắt 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
Tại sao bạn cần CSS, làm thế nào để kết nối nó bảng xếp tầng phong cách để tài liệu HTML và những điều cơ bản về cú pháp của ngôn ngữ này
Kiểu danh sách (loại, hình ảnh, vị trí) - Quy tắc Css để tùy chỉnh 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

Trang web được tạo sẽ không ngừng mở rộng và một ngày nào đó bạn sẽ nhận ra việc hiểu CSS của nó khó đến mức nào.

Nếu bạn đã từng gặp phải vấn đề tương tự, thì đã đến lúc kiểm tra mã CSS của bạn và tối ưu hóa nó. Chúng tôi đã chọn 15 công cụ để giúp bạn làm điều đó. Một số trong số chúng sẽ giúp giảm kích thước tệp CSS, một số khác sẽ cải thiện hiệu suất trang.

1. Type-o-Matic

Type-o-matic là một plugin Firebug có thể phân tích các phông chữ được sử dụng trên các trang của trang web. Plugin này hiển thị báo cáo dưới dạng bảng với thông tin về thuộc tính của phông chữ được sử dụng ( gia đình, kích thước, màu sắc và nhiều hơn nữa).

Mặc dù báo cáo được trình bày dưới dạng bảng nhưng bạn có thể dễ dàng chỉnh sửa danh sách này bằng cách kết hợp hoặc xóa các phông chữ có phong cách tương tự nhau.

2.CSSCSS

Công cụ này phân tích các tệp CSS của bạn để tìm các bản sao. Điều này sẽ làm giảm kích thước của CSS và giúp làm việc với chúng thuận tiện hơn nhiều trong tương lai. Công cụ này rất dễ cài đặt - nó được triển khai dưới dạng gói mở rộng cho Ruby và được khởi chạy từ dòng lệnh.

3. CSS Lint

Công cụ này sẽ giúp bạn xác định các vấn đề trong mã CSS của mình. Công cụ này kiểm tra cú pháp cơ bản của các kiểu và cũng áp dụng một bộ quy tắc cho mã đáng ngờ. Tất cả các quy tắc đều có thể cắm được nên bạn có thể dễ dàng thay đổi chúng.

4. Bảo vệ màu CSS

Bạn thường xuyên gặp những khách hàng muốn sử dụng những màu sắc mà bạn thậm chí còn không biết là có tồn tại. CSS Colorguard sẽ giúp bạn tạo những thứ cần thiết cách phối màu và sẽ cảnh báo bạn nếu bạn sử dụng hai màu giống nhau.

5. Đào CSS

CSS Dig là một tập lệnh Python chạy cục bộ cho phép bạn phân tích các thuộc tính và giá trị CSS của hầu hết mọi trang web, bất kể các kiểu đó có nằm trong tập tin riêng biệt hoặc trong mã trang. Công cụ này cũng giúp bạn sửa đổi, chuẩn hóa và tối ưu hóa mã CSS của mình.

6. Bụi tôi

Dust-Me là một plugin dành cho Firefox và Opera giúp loại bỏ các bộ chọn không sử dụng khỏi biểu định kiểu. Công cụ mất tất cả CSS trang web của bạn và hiển thị bộ chọn nào được sử dụng và bộ chọn nào không cần thiết.

7. Devilo.us

Devilo.us là một công cụ tiên tiến để nén và tối ưu hóa mã CSS, hiện hỗ trợ CSS3.

8. Thanh lọcCSS

Công cụ giúp bạn loại bỏ các kiểu CSS không sử dụng trên các trang web hoặc ứng dụng web. Nó có thể phát hiện ngay cả các bộ chọn CSS được tải động trong mã javascript và nén đáng kể kích thước của tệp kiểu.

9. CSS nguyên tử

CSS nguyên tử sẽ giúp bạn làm cho các tệp CSS của bạn nhỏ hơn. Nó cho phép bạn tối ưu hóa tốc độ tải trang, loại bỏ sự phụ thuộc và còn làm được nhiều hơn thế.

10. Làm sạch CSS

CleanCSS là một trình tối ưu hóa CSS đa chức năng. Công cụ này lấy mã CSS của bạn và làm cho nó sạch hơn và nhỏ hơn. Bạn có thể tối ưu hóa mã được viết bằng ngôn ngữ khác nhau: javascript, json, python, html, v.v.

11. PubCSS

Công cụ này giúp bạn dễ dàng định dạng mã CSS cho các trang ấn phẩm học thuật. Đây là thư viện các kiểu CSS để định dạng tài liệu để in và xuất bản trên Internet.

12.CSSO

CSSO (CSS Optimizer) là một công cụ thực hiện tối ưu hóa cấu trúc các tệp CSS của bạn.

13. Heli

Helium là một công cụ để xác định các thuộc tính CSS không được sử dụng trên tất cả các trang của trang web. Nó dựa trên javascript và chạy trực tiếp trong trình duyệt. Helium lấy danh sách các URL của phần trang web rồi phân tích từng trang để tạo danh sách tất cả các kiểu. Sau đó, nó xác định các thuộc tính CSS không được sử dụng.

14. Loại bỏ bình luận

Strip CSS Comments giúp đơn giản hóa đáng kể các tác vụ sau: xóa nhận xét khỏi tệp CSS, giảm kích thước tệp. Nó cũng có sẵn dưới dạng plugin cho gulp/grunt/bông cải xanh.

15. CSS co lại

Công cụ này cho phép bạn dễ dàng tối ưu hóa các tệp CSS trong khi vẫn duy trì tính nhất quán và định dạng của đánh dấu. Nó có một số công cụ cho phép bạn xóa khoảng trắng và nhận xét khỏi tài liệu.

Bạn có ý tưởng về công cụ CSS hữu ích nào khác không? Hãy chia sẻ chúng trong các ý kiến!

Bản dịch của bài viết “ 15 công cụ CSS để kiểm tra và tối ưu hóa mã CSS của bạn” được chuẩn bị bởi nhóm dự án thân thiện