Làm thế nào để loại bỏ CSS spaghetti trong ứng dụng web cũ?

Question

Sau khi làm việc trên một số ứng dụng web lớn và nhìn thấy những tấm phong cách khổng lồ không có cấu trúc rõ ràng, tôi thực sự muốn biết liệu mọi người có tìm cách giữ sạch css cho các ứng dụng web lớn và phức tạp không.

Làm thế nào để bạn di chuyển từ một di sản, mớ hỗn độn của css để làm sạch lên, độc đáo tầng, DRY stylesheets?

Ứng dụng tôi hiện đang làm việc trên có 12000 dòng css. Nó được phát triển đến kích thước này hữu cơ sớm nhất là không có tiêu chuẩn hoặc đánh giá của css, quy tắc duy nhất là làm cho ứng dụng phù hợp với thiết kế. Một số trong những vấn đề chúng tôi không ngừng có:

• phong cách mâu thuẫn: một nhà phát triển cho biết thêm một .header {font-weight: bold;} nhưng .header đã được sử dụng trong các module khác và không nên in đậm trong những.

• Sự cố xếp chồng: Tiện ích con Foo có đầu đề nhưng cũng chứa danh sách tiện ích con Bar với các lớp .header.

  • Nếu chúng tôi xác định .foo .header {...} và .bar .header {...} mọi thứ không được ghi đè rõ ràng trong foo sẽ hiển thị trong thanh.
  • Nếu chúng tôi xác định .foo> .header và .bar> .header nhưng sau đó cần phải sửa đổi foo để bọc tiêu đề trong div, ngắt kiểu của chúng tôi.

• Vấn đề về thừa kế, chúng tôi liên tục xác định lại phông chữ tiện ích thành 11px/bình thường vì một số vùng chứa hàng đầu sử dụng chiều cao dòng 12px/18 px.

• Chống lại thư viện tiện ích, sử dụng thư viện như dojo/dijit hoặc jquery ui để thêm tấn phong cách hoạt động có nghĩa là mã của chúng tôi bị rải rác với những nơi chúng tôi phải ghi đè kiểu thư viện. . Có ~ 2000 dòng css chỉ cho tinh chỉnh phong cách dijit BUILTIN

---

Chúng tôi đang ở một điểm mà chúng tôi đang nghĩ đến việc thực hiện các quy tắc sau:

Namespace tất cả các phụ tùng mới các lớp học - nếu bạn có một widget foo, tất cả các tên lớp phụ sẽ là .foo_ vì vậy chúng tôi nhận được: .foo, .foo_header, .foo_content, .foo_footer. Điều này làm cho css của chúng ta về cơ bản là FLAT, nhưng chúng ta thấy không có cách nào khác để tổ chức mã của chúng ta tiến lên mà không chạy vào các kiểu di sản hoặc các vấn đề xếp tầng mà tôi đã đề cập ở trên.

Kiểu chung của cảnh sát - có một số ít các lớp chung chung chỉ được áp dụng trong các tình huống rất cụ thể. ví dụ. .editable - áp dụng cho các phần của câu nên gọi trình chỉnh sửa - chỉ nên chứa các nút văn bản.

Tận dụng hỗn hợp trình biên dịch css Để tránh nhiều lần xác định cùng kiểu trong các tiện ích khác nhau, hãy xác định và sử dụng mixin. Mặc dù chúng tôi lo lắng các mixin cũng sẽ mất kiểm soát.

Làm cách nào khác chúng ta có thể chuyển từ mớ hỗn độn css liên tục giới thiệu hồi quy cho một điều gì đó có thể duy trì trong tương lai.

Answer 1

Chúng tôi đang sử dụng hướng dẫn kiểu ở dạng trang HTML đơn giản với các ví dụ về mọi quy tắc CSS CSS trong biểu định kiểu. Nó rất dễ dàng để nói nếu bạn thêm một quy tắc mới, không tương thích kể từ khi các ví dụ được căn chỉnh trên đầu trang của eachother.

Một ví dụ tôi thích: http://getbootstrap.com/components/ (bổ sung năm 2015)

Các pro khác mà bạn nhận được từ phương pháp này là có thể dùng lại: bạn biết những gì bạn có và bạn biết rằng bạn muốn hướng dẫn phong cách là càng nhỏ càng tốt - do đó: tái sử dụng.

Khi bạn thực hiện thay đổi đối với kiểu đã sử dụng: hãy kiểm tra hướng dẫn kiểu. Nếu nó không thay đổi nó có thể tốt (bạn có thể cần phải duyệt xung quanh một chút nếu bạn vừa thay đổi một cái gì đó bao gồm cả mô hình hộp-vấn đề, hoặc chiều rộng, chiều cao, padding, lề nói chung).

Làm thế nào để bạn di chuyển từ một di sản, mớ hỗn độn của css để làm sạch, xếp chồng độc đáo, Bản định kiểu DRY?

Sử dụng hướng dẫn kiểu làm bài kiểm tra đơn vị. Một khi bạn đã nhận được các phần thiết yếu trong nó: giảm, refactor và kết hợp (bạn có thể sẽ tìm thấy một số collissions giữa .campaign_1 span và các quy tắc thường xuyên của bạn, thừa kế có thể là bạn của bạn).

phong cách mâu thuẫn: một nhà phát triển cho biết thêm một .header {font-weight: bold;} nhưng .header đã được sử dụng trong module khác và không nên in đậm trong những.

Trả lời nhận xét của Adriano Varoli Piazza và câu trích dẫn ở trên: Tôi không nhớ đây là vấn đề hoàn toàn thuộc về CSS nhưng nhiều hơn đối với đánh dấu HTML. Dù bạn làm gì đi chăng nữa, nó cũng sẽ là một thứ nâng hạng nặng. Quyết định quy tắc nào bạn muốn giữ và thực hiện các hành động nhằm làm sạch các quy tắc ít được sử dụng hơn; ví dụ: thông qua thừa kế: #news a .header { ... } hoặc đổi tên lớp HTML a .stand_out_header { ... }.

Về ý tưởng sau đây

Namespace mọi tầng lớp phụ tùng mới - nếu bạn có một foo phụ tùng tất cả phụ classnames sẽ được .foo_ vì vậy chúng tôi nhận được: .foo, .foo_header, .foo_content, .foo_footer. Điều này làm cho css của chúng tôi về cơ bản FLAT, nhưng chúng tôi thấy không có cách nào khác cách sắp xếp mã của chúng tôi về phía trước mà không chạy vào kiểu cũ hoặc các vấn đề xếp tầng tôi đã đề cập ở trên.

Sử dụng một yếu tố có chứa thay vào đó, mà sẽ được nhiều dễ dàng hơn để duy trì:

<div id="widget_email"> 
    <h2>One type of h2</h2> 
</div> 
<div id="widget_twitter"> 
    <h2>Another h2</h2> 
</div> 

Answer 2

tôi thấy rằng phương pháp cho "namespacing" và hạn chế xung đột trong CSS là riêng biệt vào khác nhau bao gồm những gì bạn muốn để áp dụng, vì vậy mỗi trang chỉ gọi những gì nó cần.quy tắc mâu thuẫn sau đó có thể được thực hiện cụ thể hơn chỉ đơn giản bằng cách định nghĩa chúng trong một đặc biệt hơn bao gồm:

• css chung cho tất cả các trang
  • css cho các trang trong phần A css
  • cho các trang trong phần B

Vì vậy, nếu bạn tìm thấy một sửa đổi .header bạn thêm vào trong css chung làm việc tại A nhưng không trong B, bạn chỉ cần di chuyển i t đến tệp CSS thấp hơn.

Có, điều này ngụ ý nhiều tệp cần tải. Có nhiều cách xung quanh nó với các ngôn ngữ phía máy chủ, như đọc tất cả các tệp với php và chỉ gửi một khối nội dung.