Cách tốt nhất để sử dụng CSS là gì? (KHÔNG * học * nhưng thực sự * sử dụng *)

Question

Tôi biết CSS và tôi đang học nhiều hơn và phổ biến hơn. Tuy nhiên, tôi luôn cảm thấy như tôi đang hack thay vì thực hiện đúng cách.

Ví dụ, một số người tôi tôn trọng cho tôi biết rằng việc sử dụng đặt lại css là không cần thiết trong khi những người khác sống cho nó. Ngoài ra, có rất nhiều khuôn khổ css tuyệt vời (cho lưới, vv) mà thậm chí nghĩ rằng tôi hiểu chúng, tôi không bao giờ thực sự biết khi nào sử dụng chúng. Vì vậy, về cơ bản, câu hỏi của tôi là: Một khi bạn hiểu cách CSS hoạt động, có cách tiếp cận "tốt nhất" được công nhận do nhà phát triển web tuyệt vời sử dụng không? Không. Như trong python, người ta nên cố gắng sử dụng các mô hình phổ biến và đọc PEP 8. Hoặc, trong C + +, sau khi hiểu cú pháp, đọc các serie hiệu quả bởi Meyer là một tuyệt vời "thứ hai" đọc.

Xin lỗi vì đã mất nhiều thời gian để giải thích .. Tôi chỉ không muốn có câu trả lời như: Đọc "Bắt đầu CSS" để giải thích cách thay đổi nền hoặc cách đặt phông chữ. Tôi thực sự đang tìm kiếm một cách tiếp cận tiêu chuẩn tốt.

• Chúng tôi có nên sử dụng đặt lại không?
• Chúng tôi có nên chỉ sử dụng một tệp cho mỗi trang web không? Một cho trang chủ và một cho phần còn lại? Một tệp cơ bản và một lần khác nhau cho mỗi phần lớn?
• Thật tệ khi có tệp 2k + css? Nó có nghĩa là nó nên được refactored và nó chứa nhiều bản sao?
• Tôi có nên xác định cha mẹ ở đầu cho phông chữ, màu sắc, h1, v.v. hay không, khi thay đổi khác nhau cho mỗi phần .. hoặc thay vào đó luôn sử dụng tiêu chuẩn và xác định lại từng phần.
• Tôi có nên sử dụng .class và #ID một chút ở khắp mọi nơi, hay tôi nên cố gắng hạn chế tối đa chúng và thay vào đó sử dụng mô tả dài như:

    .content .main tr td span a 
    or 
    span.classname a 

Cảm ơn bạn!

tl/dr:

gì là tốt nhất "thứ hai" đọc một khi bạn đã hiểu CSS nhưng muốn sử dụng nó một cách sạch sẽ/chuyên nghiệp?

[EDIT]

Cảm ơn tất cả câu trả lời của bạn. Tôi biết tôi đã hỏi khá nhiều câu hỏi .. nhưng họ chỉ là những ví dụ cho câu hỏi thực sự là: Đọc "thứ hai" tốt nhất khi bạn đã hiểu CSS nhưng muốn sử dụng nó theo cách sạch sẽ/chuyên nghiệp. Tức là, tôi đã hy vọng đọc một cuốn sách giải thích các ví dụ mà tôi đã đề xuất .. nhưng cũng sẽ giải thích rất nhiều thứ khác không phải là cú pháp css nhưng sử dụng css-tốt nhất-chuyên nghiệp hơn.

Answer 1

Tôi có thể trả lời câu hỏi của bạn dựa trên trải nghiệm của riêng tôi, không nhất thiết phải là các phương pháp hay nhất hiện có.

• Tôi đặt lại một số thẻ nhất định, nhưng không phải tất cả các thẻ như "người thuần túy CSS" đều làm. Hãy nhớ rằng nếu bạn đang sử dụng một số thư viện CSS nhất định, như giao diện người dùng JQuery, trình đơn Superfish, vv .. việc đặt lại các thẻ có thể thực sự làm hỏng các giao diện người dùng thư viện này.
• Tôi thường có một tệp CSS bố cục/cấu hình chung và mọi trang phức tạp đều có tệp CSS của riêng nó. Vì vậy, mỗi trang bao gồm 2 tệp CSS này cộng với tệp thư viện UI của tôi (Giao diện người dùng JQuery, v.v.). Điều này làm cho nó dễ dàng hơn cho tôi để pin điểm và duy trì nó.
• 2K + ?? Có, rất xấu trong thực tế.Nếu bạn có tệp lớn, bạn thực sự nên sử dụng YSlow để xem mất bao lâu để tải tệp đó. Bạn càng mất nhiều thời gian tải trang, người dùng của bạn nhanh hơn rời khỏi trang web của bạn, trừ khi họ buộc phải sử dụng trang đó. : D
• Tôi luôn muốn "phạm vi" CSS của mình, bằng cách bắt đầu bằng câu hỏi #app. Điều này đảm bảo cài đặt chung của tôi chỉ ảnh hưởng đến nội dung và bố cục trang của tôi và chúng không ghi đè lên các thư viện UI.
• Sử dụng .class và #id theo bất kỳ cách nào phù hợp với bạn. Nếu bạn biết thẻ này chỉ tồn tại một lần, hãy sử dụng #id. Nếu bạn biết nó có thể xảy ra nhiều lần trong trang, thì tùy chọn duy nhất là sử dụng .class.

Answer 2

• Resets: Tôi nghĩ rằng có, một số không thích họ, do đó, nó tùy thuộc vào bạn để tìm ra cái nào bạn thích
• Chia vs file Unified: Phụ thuộc. Có một lợi thế cho cả hai (điệp khúc: ưu điểm, lợi thế!) Một tệp CSS dễ duyệt hơn và bạn có thể tìm thấy mối quan hệ rõ ràng trong một tệp. Sau đó, một lần nữa, nếu bạn đã lên kế hoạch cho cấu trúc trang web của mình, đang phát triển các tiện ích con được ngăn cách hoặc có nhiều người làm việc trên các tệp CSS cam kết, một phương pháp phân cấp có thể mang lại lợi ích cho bạn. Với nhiều tệp CSS, bạn luôn có thể sử dụng máy nén để phục vụ chúng cho khách hàng dưới dạng một tệp duy nhất, do đó, đó là câu hỏi bảo trì nhiều hơn.
• Số lượng tệp/dòng lớn: Bạn có nói rằng bạn có 2.000 tệp CSS (holy crap!) Hoặc 2.000 tệp CSS dòng? Cả hai đều không tuyệt vời, mặc dù sau này có thể được quản lý khá dễ dàng trong một IDE cung cấp phác thảo và xử lý thừa kế cho bạn. Trước đây ... tốt, ít nhất bạn có bảo mật công việc.
• Định nghĩa mẹ: Một lần nữa, không có câu trả lời đúng. Các quy tắc CSS cho một trang web nhỏ sẽ khác nhau rất nhiều từ một trang cấp doanh nghiệp. Một điểm khởi đầu tốt có thể là kiểm tra cách jQueryUI xử lý các kiểu và sau đó tạo thành ý kiến ​​của riêng bạn từ đó.
• Bộ chọn chính xác: Steve Souders talked about optimizing CSS selectors, đi đến kết luận rằng nó không đáng giá cho trang web trung bình của bạn. Vì vậy, bỏ qua tối ưu hóa CSS và dựa trên ví dụ của bạn, tôi muốn nói thứ hai là waaaay dễ dàng hơn để duy trì và cuối cùng có thể dự đoán được nhiều hơn. Nếu bạn thay đổi HTML ngay cả một chút, người đầu tiên sẽ phá vỡ nhanh chóng. Thứ hai sẽ không, và là di động nhiều hơn nữa.

Có những điều bạn có thể làm trong CSS để giúp cuộc sống của bạn dễ dàng hơn. Tôi khuyên bạn nên sử dụng hệ thống lưới để bố trí (blueprint, 960GS, v.v.). Cá nhân tôi thích sử dụng đặt lại vì nó làm cho thiết kế hoàn hảo pixel dễ quản lý hơn. Ngoài ra, hãy nghiên cứu những người như Eric Meyers hoặc trang web thích alistapart.com hoặc smashingmagazine.com phải nói về chủ đề này.

tl; dr - không có câu trả lời đúng, nhưng chắc chắn một số tùy chọn tốt

Answer 3

Mọi người sẽ có một loạt các câu trả lời cho những câu hỏi này, nhưng đây là một phương pháp tiếp cận tôi sẽ thực hiện:

Đặt lại

Nếu bạn đang làm việc trên một bố cục dễ vỡ - có thể dễ dàng phá vỡ nếu một vài pixel không phải là nơi bạn mong đợi - hãy cân nhắc sử dụng đặt lại. Tôi sẽ xem xét normalize.css.Thay vì hoàn toàn ghi đè mặc định của trình duyệt, nó làm mịn sự khác biệt giữa các trình duyệt.

Bạn cũng có thể xem xét đặt lại các phần tử cụ thể nếu bạn thấy mình thêm rất nhiều margin: 0; vào bảng định kiểu của mình.

Cắt tài liệu CSS

• Google recommends splitting them up để trang cá nhân không buộc người dùng phải tải về rất nhiều và rất nhiều quy tắc kiểu đó không thực sự sử dụng trên trang mà họ đang truy cập.
• Yahoo recommends combining files để giảm thiểu số lượng HTTP requestion
• Rõ ràng, việc tìm kiếm một sự cân bằng là quan trọng, và this SO question nặng một số ưu và nhược điểm.

Lớp và ID hoặc chuỗi các bộ chọn dài?

Tôi cố gắng giữ cho các lớp và ID ở mức tối thiểu (trong cả HTML và CSS của tôi). Chúng có xu hướng mong manh hơn khi bạn xây dựng các trang mà những người khác sẽ cập nhật với trình soạn thảo WYSIWYG. Tôi thêm một vài ID hoặc các lớp vào các khối lớn của trang, sau đó sử dụng CSS để nhắm mục tiêu các phần tử cụ thể trong các khối đó. Điều này dễ dàng hơn nếu bạn tránh làm tổ sâu trong HTML càng nhiều càng tốt.

Làm việc với bộ tiền xử lý CSS như LESS hoặc SASS có thể giúp bạn viết các bảng định kiểu dễ đọc hơn. Khả năng lồng ghép các quy tắc về phong cách trong cả LESS và SASS đã giúp tôi tránh được rất nhiều vấn đề liên quan đến đặc thù.

Tuy nhiên, độ đặc hiệu là một chủ đề CSS tốt để làm quen với:

• CSS-trick có a good article covering specificity
• Các W3C's own documentation rất đáng đọc.

Tài nguyên bổ sung

As far đọc như thêm là có liên quan ...

• SitePoint's collection of articles and tutorials on CSS là một nguồn lực lớn cho hướng dẫn CSS tiên tiến hơn, và họ cũng có một số điều tốt bao gồm CSS các vấn đề tiên tiến hơn những gì bạn thấy trong nhiều cuốn sách cấp độ mới bắt đầu.

Answer 4

Như với nhiều thứ không thực sự có quyền và sai, đó là nhiều hơn về sự thích hợp và khả năng quản lý.

Tôi sử dụng đặt lại CSS trên một số thành phần, tôi thích bắt đầu canvas trống thay vì tìm tải trọng mặc định không xác định.

Tôi không nghĩ rằng kích thước tệp thực sự là vấn đề, một lần nữa việc quản lý dễ dàng nhất thực sự quan trọng hơn. Tách tệp nếu nó hợp lý để làm như vậy.

Hãy suy nghĩ tối ưu hóa và cố gắng tránh trùng lặp không cần thiết. Tôi muốn xác định phông chữ/kiểu gốc khi bạn gọi nó theo kiểu được sử dụng phổ biến nhất, sau đó chỉ xác định các kiểu khác theo yêu cầu.

Cá nhân tôi muốn xác định một số lớp học thông thường, tôi không chắc chắn nếu nó tối ưu nhưng nó rất có ích, chẳng hạn như:

.bold {font-weight: bold} 
.clear {clear: both} 
.red {color: red} 

Nếu bạn làm điều này cho các yêu cầu chung bạn có thể sau đó chỉ cần sử dụng mã như

<p class="bold red"></p> 
<h2 class="red"></h2> 
<br class="clear" /> 

Mẫu!

Answer 5

Sử dụng tab. Làm cho nó dễ dàng hơn để xem. Ngoài ra tôi thích sử dụng .classname hơn #id. Ví dụ về một mảnh css của một trong những trang web của tôi:

body { 
       font-family: Arial,Helvetica,sans-serif; 
       font-size: 11px; 
       background-color: #99D9EA; 
      } 

      .lcategorie { 
       background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png'); 
       background-repeat: no-repeat; 
       padding-left: 2px; 
       text-align: left; 
       color: #FFFF00; 
       font-weight:bold; 
       width:200px; 
       height:20px; 
       display:block; 
       cursor:pointer; 
      } 

      .rcategorie { 
       background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png'); 
       background-repeat: no-repeat; 
       padding-right: 2px; 
       text-align: right; 
       font-weight:bold; 
       color: #FFFF00; 
       width:200px; 
       height:20px; 
       display:block; 
       cursor:pointer 
      } 

Answer 6

Bên cạnh những câu trả lời tốt ở trên, những gì bạn vừa mô tả trong câu hỏi của bạn cũng khác gọi là Learning Curve.

Chúng ta đều trải qua nó. Nó là không thể tránh khỏi, theo tôi.

Cách tiếp cận tốt nhất có thể là tận dụng tốt nhất các tài nguyên khổng lồ sẵn có và sau đó lọc chúng ra. Đó là một knack phát triển chỉ theo thời gian.

Tôi không nghĩ có phím tắt. Mặc dù, tôi đồng ý, sẽ tốt hơn nếu có một bàn tay hướng dẫn để giúp chúng tôi tránh những cạm bẫy và lãng phí thời gian và cho chúng tôi biết về tất cả các thực hành tốt nhất.

Nhưng ngay cả những ứng dụng này cũng có sẵn nhờ một số blogger thực sự đam mê, chuyên nghiệp trong lĩnh vực của họ.

Vì vậy, khám phá ra là những gì tôi muốn đề xuất.

Answer 7

Nếu may mắn của bạn đủ để có một máy Mac hoặc một Hackintosh ... sau đó tôi khuyên bạn nên CSSEDIT (tiếc là chỉ có sẵn trên máy Mac). Nó sẽ cho phép bạn nhanh chóng phát triển sự hiểu biết của bạn về CSS. Tôi nhận ra điều này không trả lời câu hỏi của bạn, nhưng nếu bạn thử nó, bạn sẽ hiểu tại sao nó lại quan trọng đến đường cong học tập. Đáng buồn thay, không có gì khác trên cửa sổ đến gần. Tôi sử dụng windows 99% thời gian và chuyển sang mac của tôi cho CSSEDIT.