Nhược điểm của css là gì

Bộ tiền xử lý CSS có nhiều ưu điểm. Nhưng giống như hầu hết các công cụ, chúng cũng có một số nhược điểm mà tôi sẽ mô tả ở đây

1. Gỡ lỗi khó hơn

Bộ tiền xử lý có một bước biên dịch, nghĩa là số dòng CSS không liên quan khi cố gắng gỡ lỗi mã của chúng tôi. Nhưng gỡ lỗi khó gấp đôi lập trình nên chỉ riêng điều này thôi đã là một nhược điểm rất lớn

“Gỡ lỗi khó gấp đôi lập trình”

— Brian Kernighan

Bản đồ nguồn cung cấp một giải pháp, nhưng chúng cần được thiết lập và chúng không hoạt động trên tất cả các trình duyệt, đặc biệt là những trình duyệt thường xuất hiện lỗi

Không có bản đồ nguồn, chúng tôi phải tìm kiếm các quy tắc với hy vọng rằng chúng tôi tìm thấy những gì chúng tôi đang tìm kiếm

2. Biên dịch làm chậm sự phát triển

Thời gian biên dịch có thể rất chậm, ngay cả khi sử dụng các công cụ tốt nhất trên máy tính nhanh nhất. Bạn biết cảm giác đó khi bạn làm mới và không thấy bất kỳ thay đổi nào—đó là

3. Họ có thể tạo các tệp CSS rất lớn

Các tệp nguồn có thể nhỏ, nhưng CSS được tạo có thể rất lớn, đó mới là điều quan trọng

Chúng tôi cần lưu ý rằng khi sử dụng bộ tiền xử lý CSS, chúng tôi sẽ mất một số quyền kiểm soát

4. Bảo trì và quá kỹ thuật

Chẳng hạn, người ta thường thấy các tác giả viết mã sử dụng biến red. Nhưng điều này ít có giá trị về khả năng bảo trì

Nếu màu thay đổi, thì chúng ta cần cập nhật tên và giá trị, làm cho sự trừu tượng hóa trở nên vô nghĩa

Không chỉ có các lựa chọn thay thế cho các biến và mixin mà tôi sẽ trình bày sau, mà còn có thể tìm kiếm và thay thế tất cả những gì chúng ta cần

Bộ tiền xử lý CSS yêu cầu công cụ bổ sung. Các tác giả mã không nên bị buộc phải sử dụng một trình soạn thảo cụ thể chỉ để có thể sử dụng công cụ. Đó là cái vẫy đuôi của con chó

Ngoài ra, những thứ bổ sung thêm phức tạp. Điều này cần được hiểu rõ, nâng cấp và duy trì—tất cả những điều này đều làm tăng chi phí và nguy cơ xảy ra sự cố cao hơn

6. Lưu các tệp đã tạo (hoặc không)

Việc chúng tôi có nên lưu CSS đã tạo hay không là điều mà chúng tôi không đồng ý với tư cách là một cộng đồng. Trong trường hợp đó, đã đến lúc phát triển theo hướng đồng thuận

7. Năng lực và hiểu biết

Trong khi các bộ tiền xử lý CSS và quy trình công việc xung quanh chúng đã trở nên phổ biến, thì vẫn còn một lỗ hổng kiến ​​thức. Đặc biệt, khi hiểu được sự đánh đổi

Có một sự khác biệt lớn giữa việc hiểu một công cụ và sử dụng nó một cách hiệu quả mà không gây ra các vấn đề khác

Còn các biến, mixin và lồng nhau thì sao?

Một cách tiếp cận vững chắc để viết CSS có thể duy trì giải quyết hầu hết các vấn đề. Trong mọi trường hợp, chúng ta có thể bắt chước các biến và mixin bằng cách sử dụng các bộ chọn CSS được phân tách bằng dấu phẩy

selector,
anotherSelector {
  /* common rules */
}

Và, mặc dù chúng tôi có thể lặp đi lặp lại đủ điều kiện để các bộ chọn của chúng tôi bắt chước cách lồng nhau, nhưng đó không phải là thứ giúp CSS hoạt động hiệu quả. Thay vào đó, chúng ta nên sử dụng một quy ước

Tóm lược

Thật dễ dàng để thêm bộ tiền xử lý CSS vào ngăn xếp công nghệ. Tuy nhiên, không dễ để loại bỏ nó xuống dòng, chúng ta nên chọn

Chúng tôi có trách nhiệm xem xét tác động của chúng đối với quy trình làm việc của chúng tôi trước khi đưa ra quyết định dễ dàng để cài đặt một

Đăng ký nhận bản tin của tôi

Tham gia cùng hơn 5000 người đăng ký nhận các bài viết mới nhất của tôi qua email về thiết kế dựa trên nền tảng cơ bản, tránh sự phức tạp và phù hợp với mọi người

Tôi không thích Thành phần được tạo kiểu cho lắm (tôi thích Cảm xúc hơn một chút) và hiện tại, giải pháp "đi tới" của tôi là sử dụng Mô-đun CSS hoặc nếu tôi cần làm gì đó nhanh chóng, thì tôi sử dụng thứ gì đó như Tailwind. Tuy nhiên, phần lớn các mục trên bài đăng của bạn phụ thuộc vào cấu hình của bạn và một số trong số chúng phụ thuộc vào sở thích thực tế của mọi nhà phát triển

• Khó học. Có lẽ nếu bạn đang sử dụng cú pháp này

const StyledButton = styled.button`
  color: #fff;
  background: tomato;
`;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng bạn có thể sử dụng cú pháp này để thay thế, cú pháp này có thể tái sử dụng và tổng hợp hơn một chút, đồng thời với phần mở rộng phù hợp trong trình chỉnh sửa của bạn, thậm chí còn tốt hơn

const style = css`
  color: #fff;
  background: tomato;
`;
// And later...
<button className={style}>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

• Tên lớp động. Tùy thuộc vào cấu hình của bạn, bạn có thể làm cho chúng khá tĩnh và bạn cũng có thể biến chúng thành hàm băm của các kiểu trong lớp, làm cho nó trở nên tuyệt vời cho bộ đệm (nếu kiểu thay đổi, tên lớp cũng thay đổi)
• CSS trong html của bạn. Phụ thuộc vào cấu hình gói của bạn. Không phải tất cả các gói đều đặt CSS của các thành phần được tạo kiểu trong HTML của bạn, một số trong số chúng đặt chúng vào các tệp CSS theo một cách khá thông minh
• mã không cần thiết. Phụ thuộc vào cấu hình của bạn. Nó bổ sung những thứ để đáp ứng nhiều trường hợp sử dụng hơn (các trình duyệt cũ và những thứ tương tự)
• kết xuất chậm. Phụ thuộc vào cấu hình gói của bạn. Bạn có thể định cấu hình nó thành "động" trong dev và tạo các tệp CSS tĩnh trong prod
• Thiếu sự hỗ trợ của các thư viện giao diện người dùng. Nếu một thư viện giao diện người dùng không cấp cho bạn quyền truy cập vào className của thành phần cơ bản, thì đó là một thư viện giao diện người dùng tồi. Tuy nhiên, ý tưởng với các thành phần được tạo kiểu là mang lại cho bạn trải nghiệm tốt với CSS khi bạn đang làm việc của riêng mình, chứ không phải tùy chỉnh nhiều thành phần giao diện người dùng có sẵn
• Thiếu hỗ trợ cho LESS, SCSS, PostCSS. Vâng, đây là một cách tiếp cận khác và bạn có thể làm những điều tương tự bạn có thể làm với những cách đó, chỉ bằng cách sử dụng Thành phần được tạo kiểu

Chúc mừng

Có bất lợi khi sử dụng giải thích CSS không?

Ưu điểm và nhược điểm của CSS là gì?

Nhược điểm của CSS nội bộ là gì?

Ưu điểm của CSS là gì?