Cách tốt nhất để cấu trúc biểu định kiểu CSS

Question

Tôi tương đối mới đối với CSS và dường như tôi đã có ngôn ngữ khá hợp lý cho một người mới. Tuy nhiên, trong khi nhiều hướng dẫn tôi đã đọc thường cảnh báo về "tổ chức và cấu trúc bảng định kiểu của bạn đúng cách" (và tôi chắc chắn có thể thấy lý do tại sao bây giờ tôi đã tạo một số bản định kiểu khá dài) Tôi không thể tìm thấy bất kỳ thông tin nào về định dạng chuẩn hóa cho biểu định kiểu hoặc mẫu lôgic cho bố cục giúp dễ đọc hơn sau này.

Ví dụ: tôi có tạo phần bình luận cho từng phần "địa lý" của trang của tôi (tiêu đề, hàng1, hàng2, bài viết 1 v.v.) và giữ tất cả các kiểu cho phần đó trong các đường viền nhận xét đó không? Vấn đề có vẻ như khi tôi có các kiểu được sử dụng lại trong các phần khác - và đặt chúng dưới một phần cho các kiểu trang toàn bộ, sau đó phủ nhận mục đích nhóm chúng theo từng phần. Tương tự như vậy, việc cấu trúc biểu định kiểu của tôi bằng cách nhóm dựa trên kiểu văn bản, kiểu bố cục, v.v. dường như còn khó hiểu hơn.

Có một "thực hành tốt" không? Tôi biết điều này nghe có vẻ ngu ngốc nhưng có vẻ như không có vấn đề gì bạn làm với HTML và CSS ai đó đã sẵn sàng để cho bạn biết nó sai, thực hành xấu hoặc unsemantic và tôi còn lại nhầm lẫn. Tôi muốn mã của tôi là một ví dụ tốt về công việc của tôi trong trường hợp một chủ nhân muốn kiểm tra nó trong tương lai.

Answer 1

Tôi chưa bao giờ thực sự được dạy, tuy nhiên tôi có thể cho bạn biết cách tôi tổ chức tài liệu CSS của mình. Như bạn nói, tôi muốn chia nó thành các khu vực "địa lý" ... tức là các quy tắc áp dụng cho tiêu đề, thanh bên, nội dung chính, chân trang, v.v. Và sau đó, bên dưới các quy tắc này tôi thêm rất cụ thể , nếu tôi cần tạo kiểu cho một biểu mẫu hoặc một bảng trên một trang cụ thể. Cuối cùng, tôi thêm phần "General Gubbins" ở dưới cùng khi tôi thêm các quy tắc chung có thể áp dụng trên bảng.

Ồ vâng, tôi cũng muốn thêm bảng màu của nhà thiết kế lên đầu để tham khảo nhanh.

Ví dụ ...

/* 
PALETTE: 
dark grey : #555555; 
pink  : #d93575; 
*/ 

/* HEADER */ 
#header {...} 
#header ul {...} 

/* SIDE BAR */ 
#side {...} 
#side ul {....} 

/* CONTENT */ 
#content{...} 
#content p {....} 

/* FOOTER */ 
#footer{...} 
#footer div {....} 

/* FORMS */ 
form {...} 
input {...} 

/* GENERAL GUBBINS */ 
.center {...} 
strong {...} 
floatleft {...} 

Answer 2

Những kẻ khuyên bạn nên "Tổ chức kiểu với một cấu trúc từ trên xuống" (http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/). Tôi thường sử dụng nhiều tờ định kiểu. Ví dụ: trong MVC - bạn có thể tạo kiểu cho phong cách trên mỗi lượt xem. Bằng cách đó bạn có thể đặt phong cách xem cụ thể trong một bảng định kiểu cụ thể trong khi không gây rối với 'chia sẻ' hoặc 'bố cục'.