Làm thế nào để đối phó với sự cần thiết phải thay đổi tên lớp CSS

Question

Tôi đang tìm kiếm các chiến lược của mọi người để đối phó với nhu cầu không thể tránh khỏi để thay đổi hoặc điều chỉnh lớp CSS để thích ứng với các phần tử HTML mới. Tôi thấy mình trong tình huống này khá thường xuyên vì vậy tôi hy vọng những người khác chia sẻ nỗi đau của tôi và có thể tư vấn ở đây.

Hãy tưởng tượng bạn có một bảng các sản phẩm có tên lớp ngữ nghĩa đẹp products. Điều này được tạo kiểu một cách thích hợp trong biểu định kiểu của bạn. Một vài tháng xuống dòng, sếp của bạn yêu cầu bạn tạo danh sách nhân viên trên trang web, "được tạo kiểu chính xác giống như danh sách sản phẩm".

Điều này ngay lập tức đặt ra một câu hỏi quan trọng: những gì cần gọi cho bảng nhân viên mới. Các tùy chọn duy nhất tôi có thể nghĩ đến là:

• Đặt tên lớp là products. Đây là giải pháp nhanh nhất nhưng phá hủy ngữ nghĩa. Việc đặt tên có ý nghĩa rất ít đặc biệt đối với các nhà phát triển trong tương lai.
• Thay đổi tên lớp thành tên có thể bao gồm cả danh sách sản phẩm và danh sách nhân viên. Điều này sẽ phủ nhận tiện ích tách biệt đánh dấu khỏi kiểu như HTML sẽ cần thay đổi. Ngoài ra, tôi không thể nghĩ ra một tên lớp không mang tính hiện tại có thể áp dụng cho các sản phẩm và một danh sách nhân viên.
• Giới thiệu tên lớp mới và chỉnh sửa tệp CSS sao cho .products { ... } trở thành .products, .staff { ... } và .products thead th.number { font-weight: bold } trở thành .products thead th.number, .staff thead th.number { font-weight: bold }, v.v. Một giải pháp xấu xí khác sẽ chỉ phức tạp hơn theo thời gian.

Hành động tốt nhất để thực hiện ở đây là gì?

N.B. Tôi chắc chắn rằng vấn đề này dễ dàng được giải quyết bằng cách sử dụng các khung như LESS (tôi đã không sử dụng nó một cách cá nhân) nhưng giải pháp này tấn công tôi nhiều hơn như một “sự che đậy” hơn là một biện pháp khắc phục thực tế.

Answer 1

Cách chọn tùy chọn 4:

Sao chép "sản phẩm" làm "nhân viên" và tiếp tục làm việc riêng rẽ theo thời gian.

Answer 2

Nếu bạn phải đặt phong cách của bảng vào một vài từ, nó sẽ là gì? Tôi cố gắng và sử dụng nó để đặt tên cho phong cách mà tôi sử dụng nhiều hơn ở một nơi. Sau đó, tôi có một ý tưởng về nó sẽ như thế nào nếu tôi sử dụng lớp học.

Ví dụ:

.table sọc {}

Answer 3

Đây là một trong những điều tôi thực sự không thích về CSS. Với tất cả các ngôn ngữ mạnh mẽ theo ý của chúng tôi, điều này có vẻ như bị tê liệt khi bắt đầu xử lý các tình huống rất phổ biến như của bạn. Tôi quá đấu tranh với điều này tất cả các thời gian và kết thúc hoặc là sao chép tất cả các lớp .product liên quan đến defs mới của tôi hoặc thêm một cái mới của tôi cho những người .product. Chúng có thể được rút ra sau.

Tôi cũng cần nghiên cứu về các bộ xử lý trước vì điều tôi muốn làm là OOP-y - xác định b 'lớp cơ sở' mà cả hai .product và .mynewone kế thừa và đi từ đó.

Nhưng # 3 là IMO đặt cược tốt nhất của bạn.

Answer 4

Tôi đang đi với first option vì nếu mọi thứ giống nhau & thì chỉ có thay đổi về nội dung.Vì vậy, tốt hơn là sử dụng lớp trước products cho nhân viên cũng & Bạn có thể xác định riêng bảng điều khiển của bạn với sự giúp đỡ của chú thích <-- staff plan--> bên trong trang HTML.

Answer 5

Hmm ...

Về cơ bản gốc rễ vấn đề là suy nghĩ ban đầu của bạn tạo lớp phong cách đầu tiên (.products) đã quá hẹp được đặt tên. Nó không phải là luôn luôn có thể biết rằng bạn sẽ cần phải tái sử dụng một phần đáng kể của một định nghĩa CSS tại một điểm sau đó nhưng dựa trên câu hỏi của bạn có vẻ như bạn đang ở trong dòng kinh doanh.

Khung CSS lõi không có cách nào để nói 'làm cho phong cách mới của tôi (.staff) được giống như một phong cách (.products) với những ghi đè'

Nhưng tôi tin rằng khuôn khổ LESS không cung cấp cho bạn khả năng xác định một lớp (.coolTable) với tất cả các thuộc tính và tái sử dụng các thuộc tính này trong nhiều định nghĩa lớp khác (.products và .staff) một cách nhanh chóng.

Khuôn khổ LESS không phải là 'bao quát' nhiều như một phần mở rộng cho các khả năng của CSS.

Answer 6

tôi sẽ đi với tùy chọn đầu tiên, để có lớp products với khối này .... hoặc có thể như class="products staff"

Bằng cách này tôi sẽ không thể có phong cách trùng lặp (thậm chí từ các khía cạnh trong tương lai, khi mã/phong cách có thể thay đổi rất nhiều) và bất kỳ kiểu dáng cụ thể nào cho các sản phẩm có thể được thực hiện như thế này theo lớp mới (hoặc bằng cách khác bằng cách sử dụng lớp cha trong các kiểu để cung cấp nhiều đặc trưng hơn về kiểu).

Vâng, product lớp từ không làm cho nhiều ý nghĩa ở đây, nhưng một lần nữa ngay cả đối với các nhà phát triển trong tương lai, nó vẫn có nghĩa bạn đang sử dụng phong cách của lớp nhân viên, không liên quan đến logic ...

Nhưng vẫn có, nếu có thể sửa đổi đánh dấu một cách dễ dàng từ product đến một số từ khác, tôi sẽ làm điều đó .. nhưng không phải như một yêu cầu chính trong trường hợp này ...

Answer 7

Giới thiệu tên lớp riêng lẻ cho loại nội dung mới sẽ có thể là hầu hết ngay solu sự. Nhưng tiếc là cú pháp CSS hiện tại là hoàn hảo và do đó buộc chúng ta phải quá chi tiết trong CSS của chúng ta bằng cách liệt kê từng bộ chọn đầy đủ.

Vì vậy, trong thực tế, hầu hết các giải pháp có thể duy trì thường là cố gắng tìm một tên chung cho những thứ khác nhau theo kiểu giống hệt nhau.

Answer 8

Về cơ bản có hai trường phái tư tưởng ở đây.

1) Kiểu sau đánh dấu 2) Đánh dấu theo phong cách.

Bạn phải tìm ra cái nào bạn muốn làm, và cố gắng gắn bó với cái này hay cái kia. nếu bạn trộn quá nhiều thì nó vô nghĩa và bạn chỉ có một mớ hỗn độn lớn.

Trong trường hợp đầu tiên, bạn có đánh dấu thiết lập không thay đổi. Bạn tìm ra phong cách để làm cho nó trông theo cách bạn muốn. Đây là trong tĩnh mạch của css zen vườn. Nó yêu cầu đánh dấu của bạn cực kỳ ngữ nghĩa. Nhược điểm là bạn thường có nhiều kiểu trùng lặp vì không phải lúc nào cũng có thể tạo kiểu một cách rõ ràng khi sử dụng phương thức này.

Trong giây, bạn tạo nhiều kiểu phổ biến, sau đó điều chỉnh đánh dấu của bạn để phù hợp với kiểu. Ví dụ, bạn có thể có một lớp "float", "thinBorder", "bold" rồi áp dụng các kiểu đó cho đánh dấu của bạn. Hạn chế ở đây là nếu phong cách của bạn cần thay đổi thì bạn phải thay đổi HTML (hoặc làm đậm không được in đậm, hoặc một số như vậy). Tích cực là CSS của bạn sạch hơn và dễ bảo trì hơn.

Nó hút, nhưng bạn phải cân bằng.