5

KSS là gì?

KSS (Knyle Style Sheets) là một tài liệu về CSS, khá rõ ràng cho các nhà phát triển và có cấu trúc tốt để xử lý lập trình. Để hiểu rõ hơn, tôi khuyên bạn nên đọc bài viết rất hay này về khái niệm KSS .

Nó trông như thế nào trong mã? Một ví dụ về  tập tin nút.css :

/ *

Một nút thích hợp để tặng sao cho ai đó.


: hover - Nổi bật di chuột tinh tế.

.stars-give - Điểm nổi bật cho thấy bạn đã được gắn sao.

.stars-give: hover - Điểm nổi bật tinh tế trên đỉnh của kiểu sao cho.

.disables - Làm mờ nút để cho biết nó không thể được sử dụng.


Kiểu dáng 2.1.3.

* /

a.button.star {

 ...

}

a.button.star.stars-give {

 ...

}

a.button.star.disables {

 ...

}

Như đã thấy trong ví dụ, tài liệu CSS được cung cấp thông qua các ý kiến ​​theo cách sau: dòng đầu tiên là một mô tả của phần này. Tiếp theo, có một danh sách các lớp sửa đổi và các lớp giả, mà chúng tôi đang ghi lại và thứ tự của chúng. Trong đó, không cần thiết phải tạo tài liệu cho từng thành phần CSS. Nó là đủ để xác định hành vi của các yếu tố chính và những yếu tố được sử dụng nhiều nhất.

Dòng cuối cùng của nhận xét xác định vị trí của mô tả: 2.1.3 - trong trường hợp này là phần 2 với chỉ dẫn về các mục và mục phụ. Hệ thống phân cấp có thể khác nhau tùy theo nhu cầu của nhà phát triển. Ví dụ:

1. Kiểu dáng văn bản

2. Nút

  2.1 Nút biểu mẫu

  2.1.1

  2.2 Các nút khác

  2.2.1

3. Các hình thức

  3.1 Trường văn bản

  3.2 Radio và hộp kiểm

Theo tài liệu này, một trang styleguide đặc biệt được tạo ra và trong trang này bạn có thể thấy CSS được ghi lại với mô tả. Một ví dụ:



Nếu bạn sử dụng tiền xử lý (sass, ít hơn), sẽ khá thuận tiện để mô tả mixin và các tham số của chúng:


// Tạo một nền gradient tuyến tính, từ trên xuống dưới.

//

// $ start - Hex màu ở trên cùng.

// $ end - Hex màu ở dưới cùng.

//

// Tương thích trong IE6 +, Firefox 2+, Safari 4+.

@mixin gradient ($ bắt đầu, $ end) {

 ...

}



Nó có nghĩa là gì?

Liệu nó có ý nghĩa để làm phiền với nó nếu bạn là một nhà phát triển duy nhất trong một dự án nhỏ? Thực tiễn cho thấy rằng ngay cả một dự án nhỏ cũng cần ít nhất một bảo trì và sửa đổi cơ bản: để thêm một biểu ngữ hoặc phóng to văn bản. Đôi khi, có khá nhiều chỉnh sửa nhỏ có thể làm hỏng ngay cả một CSS tinh thể.

Những lợi thế của CSS được ghi lại:

  • Thật dễ dàng để duy trì CSS như vậy. Nó vẫn sạch và dễ đọc, giúp giảm thời gian viết mã CSS mới.

  • CSS được cấu trúc bởi các tập tin. Điều này cho phép nhanh chóng tìm thấy các kiểu hiện có, sử dụng chúng và tránh trùng lặp.

  • Viết CSS như vậy giúp phát triển một thói quen tốt.

  • Nó đơn giản hóa việc giữ sự nhất quán trong dự án.

Ở giai đoạn nào chúng ta nên sử dụng nó?

Tôi khuyên bạn nên giới thiệu nó trong giai đoạn ban đầu, khi dự án chưa được làm hỏng với các biểu định kiểu, mà bạn phải đi sâu vào để tìm các yếu tố cần thiết.

Lý tưởng nhất, mặt thực tế của việc đánh dấu nên được tổ chức như thế này:

  • Xây dựng cấu trúc HTML

  • Mô tả các kiểu, nút, khối và các yếu tố CSS chính khác theo tài liệu KSS

  • Tạo các kiểu CSS độc đáo khác

Nói cách khác, nó phải là giai đoạn đầu tiên của quá trình tạo bố cục: xác định và ghi lại các thành phần trang chính (biểu mẫu, nút, tiêu đề, văn bản, thành phần UI, v.v.) và chỉ sau đó mới có thể thực hiện được nhiều thứ phức tạp hơn. Vì vậy, chúng tôi chuyển từ chung sang đặc biệt.

Chọn khung nào?

Ý tưởng chính của các khung là khá đơn giản: trong các kiểu, phần mô tả đi vào các bình luận ở phần đầu của tệp. Và theo tiêu đề, chúng được tự động thêm vào danh sách hướng dẫn.

Tạo các mô tả-docs là một loại thử nghiệm cho CSS. Chúng có thể và nên được xác định trước khi viết các kiểu để chỉ định chính xác những gì sẽ được chứa trong khối đã cho.

Tại GitHub , bạn có thể tìm thấy một ví dụ tuyệt vời về Styleguide. Tất nhiên, thật tuyệt khi có tài liệu cũng bằng HTML và JS.

Các lựa chọn thay thế

Cùng với KSS, có những công cụ tiện dụng khác có nguyên tắc hoạt động tương tự:

|