Tìm hiểu Điều này Kỳ lạ? Thủ thuật gỡ lỗi CSS

Các nhà thiết kế GHÉT anh ta! ?

Tìm hiểu Điều này Kỳ lạ? Thủ thuật gỡ lỗi CSS

* Không phải clickbait *

Trước khi đến với bài viết, tôi chỉ muốn chia sẻ rằng tôi đang xây dựng một sản phẩm và tôi rất muốn thu thập một số dữ liệu về cách phục vụ các nhà phát triển web tốt hơn. Tôi đã tạo một bảng câu hỏi ngắn để kiểm tra trước hoặc sau khi đọc bài viết này. Hãy kiểm tra nó ra — cảm ơn! Và bây giờ, quay lại chương trình đã lên lịch thông thường của chúng tôi.

Chào! ? Tôi là Zaydek! Khi tôi lần đầu tiên bắt đầu học cách làm trang web, điều đó thật khó khăn hơn nhiều so với dự đoán. Sau khi tất cả, tôi là một nhà thiết kế đồ họa có kinh nghiệm và lập trình viên - làm thế nào có thể các trang web được t cứng?

Trong bài viết này, tôi trình bày chi tiết các quyết định khiến tôi phải tạo trình gỡ lỗi CSS.

Tôi cũng đã dạy một khóa học HTML / CSS miễn phí trên Scrimba, nơi tôi dạy cách xây dựng một blog đẹp từ đầu *. Bấm vào đây để ghi danh! ?

Scrimba.com là một nền tảng front-end tương tác, nơi các trang web được ghi lại dưới dạng sự kiện - không phải video - và có thể được chỉnh sửa! ?

Trình gỡ lỗi là gì?

Có một trích dẫn tuyệt vời của Donald Knuth về gỡ lỗi. Để diễn giải, nó giống như thế này.

Ai đó: "Ngôn ngữ lập trình tốt nhất là gì?" Donald Knuth: "Ngôn ngữ nào có trình gỡ lỗi tốt nhất?"

Tôi đã không đánh giá cao ý tưởng này cho đến khi CSS. Ngôn ngữ lập trình có tính hợp lý này về chúng, nơi logic vượt quá ý kiến. Nhưng CSS thì khác bởi vì CSS “cảm thấy” cố chấp.

Vậy chúng ta có thể làm gì? Chà, chúng ta có thể lắng nghe lời khuyên hữu ích của Donald Knuth và sử dụng trình gỡ lỗi!

Trong đó ngôn ngữ lập trình là công cụ, trình gỡ lỗi là công cụ mà chúng ta có thể sử dụng để hiểu công cụ của mình - mã của chúng ta. Không phải tất cả dân gian comp-sci đều thích trình gỡ rối, và tôi hiểu điều này.

Đừng bắt máy tính làm những gì chúng ta không hiểu. Tôi nghĩ điều này có ích lợi, nhưng điều tôi đang nói ở đây là tiết lộ cấu trúc nơi nó không thể nhìn thấy được.

Hãy làm như sau:

Chúng tôi có thể làm gì để xem cấu trúc trang web của chúng tôi? Đây là hai giải pháp mà tôi biết: chúng tôi có thể tạo quy tắc CSS một lần để nhấn mạnh một phần tử hoặc chúng tôi có thể sử dụng Công cụ gỡ lỗi của Chrome, Firefox hoặc Safari. Nhưng đó ít nhiều vẫn là giải pháp một lần. Cái chúng ta cần là một giải pháp chung .

Trình gỡ lỗi của chúng tôi

Cách đây không lâu, tôi đã thiết kế tiêu đề này, và nó không đơn giản. Mục đích là để di chuột qua một hình ảnh trên văn bản nhiều dòng. Nên đơn giản, phải không?

Vâng CSS là đối kháng? đây. Điều gì sẽ đơn giản hơn trong Photoshop có thể là hành trình của một anh hùng trong CSS, và điều này đã khiến tôi thử nghiệm với outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Không có gì quá đặc biệt - chỉ là những đường kẻ trắng mềm. Những gì chúng ta có, tuy nhiên, là một quy tắc áp dụng cho tất cả các yếu tố miễn là chúng ta sử dụng một *và không phải là tên của id, classhoặc element.

Tuy nhiên, phần giới thiệu của * { … }nó rất sâu sắc đối với tôi. Tôi nghĩ, "Tôi không muốn điều này ở đâu?" Vì vậy, tôi đã thêm một vài dòng nữa và phát triển một trình gỡ lỗi chính thức hơn:

* { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Cải thiện nhiều! Ở đây chúng tôi đã tạo ra một cảm giác giống như sơ đồ cho trang web của chúng tôi. Tôi đã cẩn thận để không sử dụng các màu đồng nhất, mà thay vào đó chọn các màu nhẹ nhàng hoặc các màu có kênh alpha để các phần tử lồng vào nhau có màu sắc sâu hơn, với màu xanh lamtrắng hơn . Tôi cũng đã thêm vào !importantvì Cuộc chiến Đặc tính CSS khét tiếng.

Điều đôi khi có thể cảm thấy như CSS rắc rối với chúng ta là cách thức và thời điểm áp dụng phân tầng. Đó là, "Làm thế nào mà các phong cách đôi khi được áp dụng và đôi khi không?"

Đây không phải là CSS của Schrodinger, đó là một phép toán đơn giản. CSS sử dụng một máy tính đơn giản để xác định quy tắc nào cụ thể hơn và kết quả xác định xem CSS có được áp dụng hay không.

The mother of all specificity is !important, which overrides all inline, IDs, classes, and element rules. It’s like the Death Star as compared to The Empire. Despite the fact that the use of !important is discouraged in general, it’s perfect for a debugger — because we won’t ship our website with it “turned on.” Instead, we use the debugger just in the design and development of our website.

The more I used the debugger, the more I realized that using *:not(path):noth(g) as the selector was preferred. This way, I wouldn’t get extraneous lines from vector graphics. I also noticed that disabling box-shadow was cleaner, as the debugger doesn’t need a sense of depth.

So, here’s the final debugger:

*:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
 box-shadow: none !important;}

Tôi nghĩ con người chúng ta ghét những gì chúng ta không hiểu. Và CSS cũng không ngoại lệ. Nó bị hiểu sai vì nó bị hiểu nhầm. Tôi đề xuất: hãy nghĩ về CSS như một con dao hai lưỡi. Nó có thể được sử dụng để xây dựng và giải cấu trúc trang web . Vâng, CSS không phải là Photoshop, nhưng điều đó không có nghĩa là nó không thể làm những điều mà Photoshop không thể. Tạo trình gỡ lỗi của riêng chúng tôi một điều chúng tôi có thể làm.

Làm thế nào để sử dụng trình gỡ lỗi này?

  1. Truy cập zaydek.github.io/debug.css
  2. Đánh dấu trang “Gỡ lỗi CSS” (mã nguồn tại đây)
  3. Nhấp vào dấu trang để chuyển đổi * bật * và * tắt *?

Đừng quên khóa học HTML / CSS miễn phí trên Scrimba, nơi tôi dạy cách xây dựng một blog đẹp từ đầu *. Bấm vào đây để ghi danh! ?