2012-08-29 41 views
6

Tôi hiện đang phát triển một trang web chuyên nghiệp và tôi đã đạt được khoảng 750 dòng CSS cho khoảng 4 trang, phần lớn sẽ được đưa vào trang chủ. Tôi có dấu ngoặc nhọn trong các dòng riêng biệt. Tôi có lẽ có thể giảm nó một chút bằng cách đi qua nó một lần nữa.CSS có quá nhiều CSS?

Nhưng tôi đã tự hỏi, bạn sẽ xem xét điều gì là quá nhiều css?

Kính trọng,

Trả lời

3

Tệp CSS của bạn lớn đến mức nào? Chắc chắn, bạn phải lo lắng về việc khó khăn trình duyệt phải làm việc về tải khi giải thích CSS .. là nó hiệu quả, bạn có làm việc không?

Giữ kích thước của bạn càng thấp càng tốt, nhưng có một vài yếu tố cần suy nghĩ. Bạn luôn có thể rút gọn, nén gzip khi thực hiện xong để tiết kiệm thời gian. Hãy nhìn vào một công cụ kiểm tra http://tools.pingdom.com/

Có rất nhiều điều về vấn đề này vì vậy tôi sẽ không bận tâm lảo đảo ra ý kiến ​​cá nhân tôi, vì vậy kiểm tra những hiểu

  1. http://css-tricks.com/efficiently-rendering-css/

  2. https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS

  3. http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css/

+0

Liên kết đầu tiên khá thú vị. Vì vậy, dòng mã không phải lúc nào cũng quan trọng, bộ chọn nào bạn sử dụng cũng quan trọng. –

2

Tôi nghĩ rằng không có giới hạn nào cả. Chỉ cần viết mã bạn cần và khi bạn hoàn thành, hãy thử optimize it.

+0

Tôi đồng ý. Tôi sẽ chỉ thêm rằng điều quan trọng là phải ghi lại công việc của bạn. Vì CSS của bạn có nhiều nội dung nên có thể dễ dàng bị lạc trong hiện tại và tương lai. May mắn là liên kết được chia sẻ bởi các địa chỉ @simone khía cạnh này. –

2

Tùy thuộc vào trang web của bạn phải làm gì. Nếu đó là một blog nhỏ và bạn cần, nói rằng, 3000 dòng CSS, đó có lẽ là quá nhiều. Nếu nó là một cửa hàng trực tuyến với nhiều phần và bố cục phức tạp, nó có thể không đủ. Nó phụ thuộc vào nhu cầu của bạn.

2

Giả sử trang chủ của bạn không có hàng chục thành phần lồng nhau có vai trò/giao diện khác nhau, có thể bạn không thông minh với CSS của mình. Có hai điều phải lo lắng về ở đây:

  • Băng thông: Nếu kích thước tập tin CSS của bạn là hơn 50KBs hoặc lâu hơn, một số khách hàng của bạn với tốc độ kết nối thấp/băng thông có thể trải nghiệm một số tụt hậu đáng chú ý.

  • Rendering: Có thể là tập tin CSS của bạn là đủ phức tạp để buộc của layout/rendering engine khách hàng để thực hiện một số nỗ lực nhiều trong khi rendering.

Cả hai vấn đề sẽ làm giảm hiệu quả thời gian trên trang web của bạn. Phải làm gì?

Ví dụ đơn giản nhất về cách tối ưu hóa tệp CSS của bạn là thu thập các quy tắc mà bạn sử dụng cho nhiều thành phần trong một lớp. Có nhiều các mẹo khác để giúp giảm kích thước tệp CSS của bạn; các câu trả lời khác đã liên kết bạn với một số bài viết với các mẹo hữu ích, nhưng nếu bạn muốn cung cấp cho các chương trình tự động hóa quy trình, hãy xem CSS Tidy (và an online tool based on CSS Tidy).

Tôi hy vọng điều đó sẽ hữu ích!

3

Một Gotcha về vấn đề này (không liên quan trực tiếp đến OP, nhưng đối với những người có thể đến đây) ...

IE9 và dưới đây chỉ công nhận 4096 selectors đầu tiên trong một file CSS. Mọi thứ sau đó chỉ bị bỏ qua một cách thầm lặng.