Sai lầm CSS tồi tệ nhất của tôi

Được xuất bản lại bởi Plato

Người theo dõi: 0

Tất cả chúng ta đều mắc lỗi trong mã của mình. Nó xảy ra! Tôi biết nếu tôi có một trong những tấm biển “Những ngày kể từ sai lầm cuối cùng” treo trên bàn làm việc, thì một quả trứng ngỗng lớn sẽ lơ lửng trên đầu tôi mọi lúc. Nó cũng không phải là những sai lầm lớn. Bản thân vụng về của tôi đã phạm phải những lỗi nhỏ đối với các kho lưu trữ khác nhau, từ lỗi chính tả đến hoàn thành các thư mục mô-đun npm.

Rất tiếc.

Đó là một trong những điều tôi thực sự yêu thích về CSS: nó dễ dàng tha thứ. Nếu nó không hiểu lỗi đánh máy, nó sẽ tiếp tục tra cứu dòng thác để tìm kiếm kết quả phù hợp. Không có thứ nào trong số đó mà một nhân vật lạc lõng phá vỡ một trang web và không có tù nhân. Nhưng thật đáng xấu hổ khi lỗi CSS xuất hiện!

Như thế này, tôi thấy mình còn nhiều lần hơn những gì tôi muốn thừa nhận:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

Hoặc khi tôi cố gắng thiết lập một gradient mà không có background bất động sản:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

Tôi ghét cách gần X và C đang sử dụng bàn phím bởi vì tôi không thể đếm được bao nhiêu lần tôi đang lướt qua một cái gì đó và nhầm lẫn px cho pc các đơn vị.

.element {
  font-size: 16pc; /* I meant pixels! */
}

Một lỗi CSS khác mà tôi thường xuyên mắc phải là một lỗi mà tôi biết nhiều người khác mắc phải vì tôi phát hiện ra nó quá thường xuyên trong các bài đăng blog có các đoạn mã:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

Bạn đã bao giờ quên sử dụng var() xung quanh một biến CSS? Tôi chắc chắn có.

.element {
  color: --primary-color;
}

Nói về các biến CSS, việc đặt tên cho chúng thật khó (như mọi thứ khác) và tôi thường sử dụng một số phiên bản không chính xác của một biến mà tôi đã đặt tên!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

Vâng, tôi thực sự đã sao chép một đoạn CSS trước đây chỉ để có những câu trích dẫn ưa thích cản trở hoạt động của nó:

.element::before {
  content: “”; /* Should be "" */
}

Và, vâng, tôi đã mất quá nhiều thời gian để tìm ra những trích dẫn đó là thủ phạm.

Nhìn vào cái cuối cùng đó nhắc nhở tôi rằng đôi khi tôi quên cài đặt content tài sản khi tôi làm việc với ::before or ::after. Điều đó nhắc tôi nhớ lại cách tôi đã quên thiết lập một phần tử position trước khi cố gắng bù đắp nó hoặc thay đổi nó z-index. Nghiêm túc mà nói, những điều này xảy ra!

Thật khó để nói về những sai lầm

Bạn đã bao giờ đọc xong một số bài đăng trên blog chia sẻ thủ thuật tuyệt vời nào đó và cảm thấy một số loại Hội chứng kẻ giả mạo chưa? Tôi nghĩ điều đó phần lớn là do các bài đăng trên blog thường che đậy công việc thực sự - và những thất bại - trở thành những thủ thuật đáng kinh ngạc. Là một người đọc những bài viết như vậy để kiếm sống, tôi có thể nói với bạn rằng nhiều người, nếu không phải là đại đa số, phải trải qua nhiều vòng chỉnh sửa, nơi những sai lầm đáng xấu hổ có thể được loại bỏ và làm phẳng.

Ngay cả những bài báo tuyệt vời đến mức nực cười đó cũng phải thất bại trước khi họ nhận được tất cả những điều đó ooooo và ahhhhhh.

Điều này cũng đúng với bất kỳ ứng dụng, trang web, bản demo hoặc bất kỳ thứ gì bạn tình cờ gặp. Cơ hội để bất kỳ ai trong số họ xuất hiện hoàn hảo ngay lần đầu tiên là điều không hề nhỏ.

Nhưng nếu tôi hoàn toàn trung thực với bạn, tôi thường ngạc nhiên (và quan tâm) hơn đến cuộc hành trình nó cần để hoàn thành một cái gì đó, mụn cóc và tất cả. Cuộc hành trình là một cái nhìn thoáng qua về những gì nó như thế nào suy nghĩ như một nhà phát triển front-end. Đó là nơi mà việc học thực sự (và có giá trị nhất) xảy ra.

Và tất cả những điều này chỉ đơn thuần là xây dựng những gì tôi thực sự muốn hỏi…