Câu hỏi này là về việc tổ chức các chỉ thị CSS thực tế trong một tệp .css. Khi phát triển một trang hoặc tập hợp các trang mới, tôi thường chỉ thêm các lệnh bằng tay vào tệp .css, cố gắng cấu trúc lại khi có thể. Sau một thời gian, tôi có hàng trăm (hoặc hàng nghìn) dòng và có thể khó tìm thấy thứ tôi cần khi chỉnh sửa bố cục.

Có ai có lời khuyên cho cách tổ chức các chỉ thị?

• Tôi có nên cố gắng sắp xếp từ trên xuống, bắt chước DOM không?
• Tôi có nên tổ chức theo chức năng, đặt các chỉ thị cho các phần tử hỗ trợ các phần giống nhau của giao diện người dùng lại với nhau không?
• Tôi có nên sắp xếp mọi thứ theo thứ tự bảng chữ cái theo bộ chọn không?
• Một số kết hợp của các cách tiếp cận này?

Ngoài ra, có giới hạn về số lượng CSS mà tôi nên giữ trong một tệp trước khi chia nhỏ nó thành các tệp riêng biệt không? Nói, 1000 dòng? Hay luôn luôn là một ý kiến ​​hay khi giữ toàn bộ mọi thứ ở một nơi?

Câu hỏi liên quan: Cách tốt nhất để tổ chức các quy tắc CSS là gì?

Hãy xem ba bản trình bày chia sẻ slide này để bắt đầu:

• CSS đẹp có thể bảo trì
• CSS có thể bảo trì
• CSS hiệu quả, có thể bảo trì, mô-đun

Đầu tiên, và quan trọng nhất, ghi lại CSS của bạn. Dù bạn sử dụng phương pháp nào để tổ chức CSS của mình, hãy nhất quán và ghi lại nó. Mô tả ở đầu mỗi tệp những gì có trong tệp đó, có thể cung cấp mục lục, có thể đề cập đến việc dễ dàng tìm kiếm các thẻ duy nhất để bạn dễ dàng chuyển đến các phần đó trong trình chỉnh sửa của mình.

Nếu bạn muốn chia CSS của mình thành nhiều tệp, hãy làm như vậy. Oli đã đề cập rằng các yêu cầu HTTP bổ sung có thể tốn kém, nhưng bạn có thể có cả hai điều tốt nhất. Sử dụng một số loại tập lệnh xây dựng để xuất bản CSS mô-đun, được tài liệu hóa đầy đủ của bạn thành một tệp CSS nén, duy nhất. Các YUI Compressor có thể giúp nén.

Ngược lại với những gì những người khác đã nói cho đến nay, tôi thích viết mỗi thuộc tính trên một dòng riêng biệt và sử dụng thụt đầu dòng để nhóm các quy tắc liên quan. Ví dụ sau ví dụ của Oli:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

Điều đó giúp bạn dễ dàng theo dõi cấu trúc tệp, đặc biệt là có đủ khoảng trắng và nhận xét được đánh dấu rõ ràng giữa các nhóm, (mặc dù không dễ dàng để đọc nhanh) và dễ dàng chỉnh sửa (vì bạn không phải lướt qua các dòng CSS dài đơn lẻ. cho mỗi quy tắc).

Hiểu và sử dụng phân tầng và tính cụ thể (vì vậy sắp xếp các bộ chọn của bạn theo thứ tự bảng chữ cái là đúng).

Việc tôi có chia CSS của mình thành nhiều tệp hay không và trong những tệp nào phụ thuộc vào kích thước và độ phức tạp của trang web và CSS. Tôi luôn luôn ít nhất có một reset.css. Điều đó có xu hướng đi kèm với layout.cssbố cục trang chung, nav.cssnếu các menu điều hướng trang web hơi phức tạp và forms.cssnếu tôi có nhiều CSS để tạo kiểu cho các biểu mẫu của mình. Ngoài ra, tôi vẫn đang tự mình tìm hiểu nó. Tôi có thể có colors.cssvà type.css/fonts.csstách màu sắc / đồ họa và kiểu chữ, base.cssđể cung cấp một kiểu cơ sở hoàn chỉnh cho tất cả các thẻ HTML ...

Tôi có xu hướng cực khoái css của mình như thế này:

1. reset.css
2. base.css: Tôi đặt bố cục cho các phần chính của trang
   1. phong cách chung
   2. Tiêu đề
   3. Điều hướng
   4. Nội dung
   5. chân trang
3. bổ sung- [tên trang] .css: các lớp chỉ được sử dụng trong một trang

Tuy nhiên bạn thấy nó dễ đọc nhất!

Nghiêm túc mà nói, bạn sẽ nhận được một tỷ năm gợi ý nhưng bạn sẽ chỉ thích một vài phương pháp.

Tuy nhiên, tôi sẽ nói một số điều:

• Việc chia nhỏ một tệp CSS thành nhiều phần giúp bạn sắp xếp nó trong đầu, nhưng nó có nghĩa là nhiều yêu cầu hơn từ các trình duyệt, điều này cuối cùng dẫn đến máy chủ chạy chậm hơn (nhiều yêu cầu hơn) và trình duyệt mất nhiều thời gian hơn để hiển thị các trang. Ghi nhớ nó trong tâm trí.
• Việc chia nhỏ tệp chỉ vì số dòng tùy ý là điều ngớ ngẩn (ngoại trừ trường hợp bạn có một trình chỉnh sửa tồi tệ - trong trường hợp đó, hãy lấy một cái mới)

Cá nhân tôi viết mã CSS của mình như thế này:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

Giữ các quy tắc trên một dòng cho phép tôi đọc lướt một tệp rất nhanh và xem có những quy tắc nào. Khi chúng được mở rộng, tôi thấy nó giống như một công việc khó khăn khi cố gắng tìm ra những quy tắc đang được áp dụng.

Có một số phương pháp được công nhận để định dạng CSS của bạn. Cuối cùng tùy thuộc vào bạn những gì bạn cảm thấy thoải mái nhất khi viết nhưng những điều này sẽ giúp quản lý CSS của bạn cho các dự án lớn hơn phức tạp hơn. Điều đó không quan trọng, nhưng tôi có xu hướng sử dụng kết hợp BEM và SMACSS.

BEM (Block, Element, Modifier)

BEM là một quy ước đặt tên rất hữu ích, mạnh mẽ và đơn giản để làm cho mã giao diện người dùng của bạn dễ đọc và dễ hiểu, dễ làm việc hơn, dễ mở rộng quy mô, mạnh mẽ và rõ ràng và nghiêm ngặt hơn rất nhiều.

Khối

Thực thể độc lập tự nó có ý nghĩa như:

header, container, menu, checkbox, input

Thành phần

Các phần của một khối và không có ý nghĩa độc lập. Chúng được gắn về mặt ngữ nghĩa với khối của nó:

menu item, list item, checkbox caption, header title

bổ nghĩa

Cờ trên các khối hoặc phần tử. Sử dụng chúng để thay đổi ngoại hình hoặc hành vi:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

Mục đích của OOCSS là khuyến khích sử dụng lại mã và cuối cùng là các bảng định kiểu nhanh hơn và hiệu quả hơn, dễ dàng thêm vào và duy trì.

OOCSS dựa trên hai nguyên tắc chính:

1. Tách cấu trúc khỏi da

Điều này có nghĩa là xác định các tính năng hình ảnh lặp lại (như kiểu nền và đường viền) như những “giao diện” riêng biệt mà bạn có thể trộn và kết hợp với các đối tượng khác nhau của mình để đạt được lượng lớn hình ảnh đa dạng mà không cần nhiều mã. Xem đối tượng mô-đun và các giao diện của nó.

2. Tách vùng chứa và nội dung

Về cơ bản, điều này có nghĩa là “hiếm khi sử dụng các kiểu phụ thuộc vào vị trí”. Một đối tượng phải trông giống nhau cho dù bạn đặt nó ở đâu. Vì vậy, thay vì tạo kiểu cụ thể với .myObject h2 {...}, hãy tạo và áp dụng một lớp mô tả câu hỏi được đề cập, chẳng hạn như. Điều này cung cấp cho bạn sự đảm bảo rằng: (1) tất cả các s chưa được phân loại sẽ trông giống nhau; (2) tất cả các phần tử có lớp danh mục (được gọi là mixin) sẽ trông giống nhau; và 3) bạn sẽ không cần tạo kiểu ghi đè cho trường hợp khi bạn thực sự muốn .myObject h2 trông giống như bình thường.

SMACSS

SMACSS là một cách để kiểm tra quy trình thiết kế của bạn và là một cách để điều chỉnh các khuôn khổ cứng nhắc đó thành một quy trình suy nghĩ linh hoạt. Đây là một nỗ lực để ghi lại một cách tiếp cận nhất quán để phát triển trang web khi sử dụng CSS.

Cốt lõi của SMACSS là phân loại. Bằng cách phân loại các quy tắc CSS, chúng ta bắt đầu thấy các mẫu và có thể xác định các phương pháp thực hành tốt hơn xung quanh mỗi mẫu này.

Có năm loại danh mục:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

Cơ sở Chứa các kiểu phần tử đặt lại và mặc định. Nó cũng có thể có các kiểu cơ sở cho các điều khiển như nút, lưới, v.v. có thể được ghi đè sau này trong tài liệu trong các trường hợp cụ thể.

Bố cục Sẽ chứa tất cả điều hướng, đường dẫn, sơ đồ trang web, v.v.

Mô-đun Chứa các kiểu khu vực cụ thể như kiểu biểu mẫu liên hệ, ô trang chủ, danh sách sản phẩm, v.v. v.v.

State Chứa các lớp trạng thái như isSelected, isActive, hasError, wasSuccessful, v.v.

Chủ đề Chứa bất kỳ kiểu nào có liên quan đến chủ đề.

Có quá nhiều thứ để chi tiết ở đây nhưng hãy xem những cái khác:

• SuitCSS
• AtomicCSS (không phải Thiết kế nguyên tử)
• oCSS (CSS không phải trả tiền)

Tôi đi với đơn đặt hàng này:

1. Các quy tắc kiểu chung, thường được áp dụng cho các phần tử trần (a, ul, ol, v.v.) nhưng chúng cũng có thể là các lớp chung (.button, .error)
2. Quy tắc bố cục trang được áp dụng cho hầu hết / tất cả các trang
3. Quy tắc bố cục trang riêng lẻ

Đối với bất kỳ quy tắc kiểu nào áp dụng cho một trang hoặc một nhóm nhỏ các trang, tôi sẽ đặt phần thân thành id và một lớp, giúp dễ dàng nhắm mục tiêu các trang cụ thể. Id là tên cơ sở của tệp, và lớp là tên thư mục chứa nó.

Tôi đã thử rất nhiều chiến lược khác nhau và tôi luôn quay lại với phong cách này:

.class {border: 1px solid #000; padding: 0; margin: 0;}

Điều này là thân thiện nhất khi nói đến một số lượng lớn các tờ khai.

Ông Snook đã viết về điều này gần bốn năm trước :) .

Xác định các phong cách phổ biến. Không phải các kiểu giống nhau, các kiểu có mục đích giống nhau - trong đó việc thay đổi kiểu cho một bộ chọn sẽ có nghĩa là bạn cũng muốn thay đổi bộ chọn khác. Tôi đã đặt một ví dụ về phong cách này trong một bài đăng khác: Tạo một biến trong tệp CSS để sử dụng trong tệp CSS đó .

Ngoài ra, hãy nhóm các quy tắc liên quan lại với nhau. Và chia các quy tắc của bạn thành nhiều tệp ... trừ khi mọi trang thực sự cần mọi quy tắc.

Vì thứ tự thực tế là một phần quan trọng trong cách CSS của bạn được áp dụng, có vẻ hơi ngu ngốc khi tiếp tục với đề xuất "theo thứ tự bảng chữ cái".

Nói chung, bạn muốn nhóm các mục lại với nhau theo khu vực của trang mà chúng ảnh hưởng. Ví dụ: các kiểu chính ảnh hưởng đến mọi thứ trước tiên, sau đó đến kiểu đầu trang và chân trang, sau đó là kiểu điều hướng, rồi đến kiểu nội dung chính, rồi đến kiểu nội dung phụ.

Tôi sẽ tránh chia thành nhiều tệp tại thời điểm này, vì nó có thể khó bảo trì hơn. (Rất khó để giữ thứ tự thác trong đầu khi bạn mở sáu tệp CSS). Tuy nhiên, tôi chắc chắn sẽ bắt đầu di chuyển các kiểu sang các tệp khác nhau nếu chúng chỉ áp dụng cho một tập hợp con các trang, ví dụ: kiểu biểu mẫu chỉ được liên kết đến một trang khi trang thực sự chứa một biểu mẫu.

Tôi đã từng lo lắng về điều này liên tục, nhưng Firebug đã đến giải cứu.

Ngày nay, việc xem xét các phong cách của bạn có tương quan với nhau như thế nào thông qua Firebug và từ đó tìm ra những gì cần phải làm.

Chắc chắn, hãy chắc chắn rằng có một cấu trúc hợp lý để nhóm các phong cách liên quan lại với nhau, nhưng đừng đi quá đà. Firebug làm cho mọi thứ dễ theo dõi hơn rất nhiều mà bạn không phải lo lắng về việc tạo ra một cấu trúc css hoàn hảo.

Đây là những gì tôi làm. Tôi có một trang chỉ mục CSS không có chỉ thị nào trên đó và trang này gọi các tệp khác nhau. Đây là một mẫu ngắn:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Nó bắt đầu với một thiết lập lại hoàn toàn. Tập tin tiếp theo xác định bảng màu để dễ dàng tham khảo. Sau đó, tôi phong cách chính <div/>s để xác định bố trí, header, footer, số cột, là chỗ thích hợp, vv ... Các thẻ html definses <body/>, <h1/>, <p/>, t vv ... Tiếp theo là các phần cụ thể của trang web.

Nó rất rộng và rất rõ ràng. Thân thiện hơn nhiều để tìm mã để thay đổi và một dd mới.

Các tệp CSS được lưu vào bộ nhớ cache trên máy khách. Vì vậy, bạn nên lưu giữ tất cả các kiểu của mình trong một tệp. Nhưng khi phát triển, tôi thấy việc cấu trúc CSS của mình theo các miền sẽ rất hữu ích.

Ví dụ: reset.css, design.css, text.cssvà vân vân. Khi tôi phát hành sản phẩm cuối cùng, tôi trộn tất cả các phong cách vào một tệp.

Một mẹo hữu ích khác là tập trung khả năng đọc vào các quy tắc, không phải kiểu.

Trong khi:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Có vẻ tốt, không dễ dàng tìm ra các quy tắc khi bạn có 100 dòng mã.

Thay vào đó, tôi sử dụng định dạng này:

rule { property: value; property: value; }

rule { property: value; property: value; }

ITCSS

Bởi Harry Roberts (CSS Wizardry)

Xác định không gian tên và tầng toàn cầu, đồng thời giúp giữ cho tính cụ thể của bộ chọn ở mức thấp.

Kết cấu

Hai cách đầu tiên chỉ áp dụng nếu bạn đang sử dụng bộ xử lý trước.

1. (Cài đặt)
2. (Công cụ)
3. Generics
4. Thành phần
5. Các đối tượng
6. Các thành phần
7. Trumps

Thông thường tôi làm điều này:

1. <link rel="stylesheet" href="css/style.css">

2. Trong style.css, tôi @ nhập nội dung sau:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. Trong colors.csstôi @importnhư sau (khi sử dụng các thuộc tính CSS tùy chỉnh):

   @import url(root/variable.css);
   

Mọi thứ đều theo thứ tự và dễ dàng lấy bất kỳ phần nào của mã để chỉnh sửa. Tôi sẽ rất vui nếu nó có ích bằng cách nào đó.