2009-04-21 33 views
20

Thường khi tôi thiết kế trang web, tôi cần có một phong cách cụ thể để áp dụng cho một yếu tố cụ thể trên một trang và tôi hoàn toàn chắc chắn nó sẽ chỉ áp dụng cho phần tử đó trên trang đó (chẳng hạn như nút vị trí hoặc thứ gì đó). Tôi không muốn sử dụng phong cách nội tuyến, vì tôi có xu hướng đồng ý với triết lý rằng phong cách được giữ riêng biệt với việc đánh dấu, vì vậy tôi thấy mình đang tranh luận nội bộ nơi đặt định nghĩa kiểu.Quy tắc css cụ thể của trang - nơi đặt chúng?

Tôi ghét xác định một lớp hoặc ID cụ thể trong tệp css cơ bản của mình cho một trường hợp sử dụng một lần và tôi sợ ý tưởng tạo tệp .css cụ thể cho từng trang. Đối với trang web hiện tại tôi đang nghiên cứu, tôi đang xem xét việc chỉ định định nghĩa kiểu dáng ở đầu trang trong phần tử đầu. Bạn sẽ làm gì?

Trả lời

12

Hãy tìm hiểu xem có sự kết hợp các lớp học nào mang đến cho bạn kết quả mà bạn muốn không. Bạn cũng có thể muốn xem xét việc chia nhỏ CSS cho phần tử đó thành một vài lớp có thể được sử dụng lại trên các phần tử khác. Điều này sẽ giúp giảm thiểu CSS cần thiết cho toàn bộ trang web của bạn.

Tôi sẽ cố gắng tránh CSS của trang cụ thể ở đầu tệp HTML vì tệp CSS bị phân mảnh trong trường hợp bạn muốn thay đổi giao diện của trang web.

Đối với CSS thực sự, thực sự, không bao giờ được sử dụng trên bất kỳ thứ gì khác, tôi vẫn sẽ đặt ra quy tắc #id trong CSS toàn trang web.

Vì CSS được liên kết từ một tệp khác nên nó cho phép trình duyệt lưu tệp đó làm giảm băng thông máy chủ của bạn (rất) một chút cho các lần tải trong tương lai.

+1

Tôi ước gì tôi có thể đưa ra câu trả lời cho tất cả, nhưng bạn là câu trả lời dài nhất, vì vậy bạn có được nó. Tôi đã kết thúc một lớp học có thể đủ chung chung để đi vào tệp css chính mà không làm lộn xộn mọi thứ. Cảm ơn bạn đã cân nhắc về bộ nhớ đệm và kích thước trang, tôi cũng đã quên xem xét điều đó. – Chris

+0

Câu trả lời hay. Điều này tốt hơn rõ ràng các điểm trong bài viết của tôi. Làm tốt. –

3

Tôi sẽ đặt chúng trong một thẻ <style /> ở đầu trang.

1

Trong trường hợp đó, tôi nghĩ việc đặt thông tin kiểu trang cụ thể trong tiêu đề có lẽ là giải pháp tốt nhất. Ô nhiễm kiểu trang toàn màn hình của bạn có vẻ sai và tôi đồng ý với việc bạn thực hiện các kiểu nội tuyến.

1

Trong trường hợp đó, tôi thường đặt nó ở đầu trang. Tôi có một khung định nghĩa trang trong PHP mà tôi sử dụng mang các biến cục bộ cho mỗi trang, một trong số đó là các kiểu CSS của từng trang cụ thể.

1

Đặt ở vị trí bạn sẽ xem nếu bạn muốn biết vị trí được xác định.

Đối với tôi, đó chính xác là nơi tôi đặt kiểu được sử dụng 2 lần, 5 lần hoặc 170 lần - tôi không thấy lý do nào để loại trừ kiểu khỏi bảng định kiểu chính dựa trên số lượng sử dụng.

4

Tôi nghĩ bạn chắc chắn nên mở rộng quy trình suy nghĩ để bao gồm một số nghi ngờ về "trang cụ thể css". Đây là một điều rất hiếm có. Tôi muốn nói đi cho phong cách toàn cầu tờ anyway, nhưng refactor css/html của bạn trong một cách mà các trang không cần phải có phong cách siêu cụ thể. Và nếu cuối cùng có một vài dòng đánh dấu trang cụ thể trong css toàn cầu, những người quan tâm. Tốt hơn là nên giữ nó ở một nơi nhất quán.

3

Không đáng để tải một tệp CSS cụ thể cho một hoặc hai quy tắc cụ thể. Tôi sẽ đặt nó vào các thẻ trong phần đầu của tài liệu. Những gì tôi thường làm là có tệp CSS trên toàn trang web của tôi và sau đó sử dụng nhận xét, phân đoạn nó dựa trên các trang và áp dụng các quy tắc cụ thể tại đó.

4

Xác định kiểu trong trang tiêu thụ hoặc căn chỉnh kiểu của bạn là hai mặt của cùng một đồng tiền - trong cả hai trường hợp bạn đang sử dụng băng thông trang để lấy kiểu trong đó. Tôi không nghĩ một người nhất thiết phải tốt hơn người kia.

Tôi sẽ ủng hộ việc tạo #Selector cho nó trong biểu định kiểu chính trên toàn trang web của bạn. Ô nhiễm là tối thiểu và nếu bạn thực sự có nhiều trường hợp thật sự độc đáo, bạn có thể muốn suy nghĩ lại theo cách bạn đánh dấu trang web của bạn.

2

Như bạn biết các tệp định kiểu tệp là các tệp tĩnh và được lưu vào bộ nhớ cache tại ứng dụng khách. Ngoài ra chúng có thể được nén bởi máy chủ web. Vì vậy, đặt chúng trong một tập tin bên ngoài là sự lựa chọn của tôi.

4

tôi sẽ thiết lập một id cho một trang như

<body id="specific-page"> or <html id="specific-page"> 

và tận dụng cơ chế ghi đè css trong file trên cả trang web css.

5

Có bốn trường hợp cơ bản:

  1. style = thuộc tính. Đây là mã duy trì ít nhất nhưng dễ nhất. Cá nhân tôi xem xét việc sử dụng style = là một lỗi.
    • < phần tử > phần tử ở đầu trang. Điều này là tốt hơn một chút so với style = vì nó giữ đánh dấu sạch sẽ, tuy nhiên nó lãng phí băng thông và làm cho nó khó khăn hơn để thực hiện thay đổi CSS, bởi vì bạn không thể nhìn vào bảng định kiểu và biết quy tắc tồn tại.
    • css của trang-specifc: Điều này cho phép bạn có tệp CSS chính rõ ràng về HTML . Tuy nhiên, điều đó có nghĩa là khách hàng của bạn phải tải xuống rất nhiều tệp CSS nhỏ, làm tăng độ trễ băng thông và thời gian tải trang. Đó là, tuy nhiên, rất dễ dàng để duy trì.
    • một CSS lớn trên toàn trang web: Lợi thế chính của một tệp lớn là chỉ có một thứ để tải xuống. Điều này hiệu quả hơn nhiều về băng thông và độ trễ.

Nếu bạn có bất kỳ lập trình server-side xảy ra, bạn có thể có thể chỉ cần tự động kết hợp nhiều sheet từ # 3 để có được những ảnh hưởng của # 4.

Tôi muốn giới thiệu một tệp lớn, cho dù bạn thực sự duy trì tệp đó dưới dạng một tệp hay tạo tệp thông qua quá trình xây dựng hoặc động trên máy chủ. Bạn có thể chỉ định bộ chọn của mình bằng cách sử dụng các ID trang cụ thể (luôn bao gồm một ID, chỉ trong trường hợp).

Đối với số answer that was accepted when I wrote this, Tôi không đồng ý với việc tìm kiếm "kết hợp các lớp cung cấp cho bạn kết quả bạn muốn". Điều này nghe với tôi như các lớp học đang xác định một phong cách trực quan thay vì một khái niệm logic. Các lớp của bạn phải giống như "titlebox" chứ không phải là "red". Sau đó, nếu bạn cần thay đổi màu sắc văn bản trên trang thông tin người dùng, bạn có thể nói

#userInfoPage .titlebox h1 { color : red; } 

Đừng bắt đầu áp dụng các lớp học ở khắp mọi nơi vì một lớp học hiện nay đã có một diện mạo nào đó mà bạn muốn. Bạn nên đặt các khái niệm cấp cao vào trang của mình, được biểu diễn bằng HTML với các lớp và sau đó tạo kiểu cho các khái niệm đó chứ không phải theo cách khác.

Các vấn đề liên quan