Cách tối ưu hóa CSS với Hướng dẫn kiểu mã

Khi các nhà thiết kế nói về hướng dẫn phong cách, họ thường có nghĩa là một hướng dẫn theo thỏa thuận trên nhìn và cảm nhận mạch lạc của một trang web hoặc một ứng dụng, với một thiết kế tốt phối màu, kiểu chữ và giao diện người dùng được sử dụng trên toàn bộ dự án.

Có một loại hướng dẫn phong cách khác mà chúng ta có thể sử dụng trong phát triển web, và nó cũng quan trọng nhưng hiếm khi được thảo luận hơn: hướng dẫn phong cách cho chính mã. Hướng dẫn về kiểu mã dành cho nhà phát triển hơn là nhà thiết kế và mục tiêu chính của họ là tối ưu hóa CSS hoặc mã khác.

Đưa các hướng dẫn kiểu mã thích hợp vào sử dụng cung cấp cho chúng ta tổ chức tốt hơn, cơ sở mã nhất quán, cải thiện khả năng đọc mã và mã dễ bảo trì hơn. Không phải ngẫu nhiên mà các công ty công nghệ lớn, như Google, AirBnB hay Dropbox sử dụng tốt chúng.

Trong bài đăng này, chúng tôi sẽ xem xét cách chúng tôi có thể tối ưu hóa CSS một cách thông minh với sự trợ giúp của các hướng dẫn kiểu mã CSS.

Hướng dẫn kiểu mã so với thư viện mẫu

Trong ngành công nghiệp của chúng tôi có một mức độ không chắc chắn nhất định về những gì chúng ta có thể gọi là hướng dẫn phong cách. Một danh sách ngoài ví dụ sử dụng nó đồng nghĩa với thuật ngữ thư viện mẫu trong bài viết này, nhưng chúng ta cũng có thể bắt gặp loại định nghĩa này trong các bài viết khác.

Mặt khác, cũng có các ấn phẩm, chẳng hạn như CSS Tricks hoặc blog của Brad Frost, phân biệt các hướng dẫn kiểu mã với các thư viện mẫu. Cách tiếp cận sau này có thể đưa chúng ta đến gần hơn với một trang web được tối ưu hóa tốt, như nó cho phép chúng tôi xử lý mã và thiết kế riêng, vì vậy chúng tôi sẽ sử dụng điều này trong bài viết này.

Cả hai hướng dẫn kiểu mã và thư viện mẫu bao gồm một chiến lược kiểu dáng, nhưng một loại khác nhau. Các thư viện mẫu, chẳng hạn như Bootstrap, Zurb Foundation, Ngôn ngữ kinh nghiệm toàn cầu của BBC hoặc thư viện mẫu của MailChimp, cung cấp cho chúng ta giao diện người dùng với các lớp CSS, kiểu chữ, sơ đồ màu, đôi khi là hệ thống lưới và các mẫu thiết kế khác.

Hướng dẫn kiểu mã CSS, chẳng hạn như Evernote's hoặc ThinkUp (hoặc những người được đề cập trong phần giới thiệu) có chứa quy tắc về cách viết CSS bao gồm những thứ như quy ước đặt tên, cấu trúc tệp, thứ tự thuộc tính, định dạng mã, và những người khác.

Lưu ý rằng các trình tạo hướng dẫn kiểu sống, chẳng hạn như KSS, Styledown hoặc Pattern Lab, tạo thư viện mẫu và không phải hướng dẫn phong cách mã hóa. Mặc dù các thư viện mẫu cũng rất hữu ích và nâng cao quá trình phát triển web, nhưng chúng không cho phép chúng tôi tự tối ưu hóa mã.

Xây dựng Hướng dẫn về kiểu mã CSS của bạn

Mục tiêu cuối cùng của hướng dẫn kiểu mã CSS là đảm bảo chúng ta có thể làm việc với một cơ sở mã nhất quán, dễ gỡ lỗi được viết bởi các nhà phát triển, những người tuân theo các quy tắc tạo kiểu mã giống nhau. Tạo một hướng dẫn kiểu mã CSS có thể mất một chút thời gian nhưng nó đáng để nỗ lực, vì chúng ta chỉ phải thực hiện một lần. Sau đó, chúng ta có thể sử dụng cùng một hướng dẫn phong cách trên các dự án khác nhau.

Điều quan trọng cần lưu ý là các hướng dẫn phong cách tốt nhất không chỉ chứa các quy tắc tạo kiểu mà còn ví dụ sử dụng tốt và xấu, vì cách này các nhà phát triển có thể hiểu trực quan hơn các quy tắc.

Ví dụ AirBnB hiển thị các ví dụ tốt và xấu cho nhà phát triển theo cách dễ tiêu hóa sau:

Cấu trúc tệp

Đầu tiên, chúng ta cần tìm ra một logic theo đó chúng ta sẽ tổ chức các tệp CSS của mình. Đối với các dự án nhỏ hơn, một tệp CSS có thể là đủ, nhưng đối với các dự án lớn hơn thì nó luôn luôn tốt hơn để phá vỡ mã, và nối các tệp riêng biệt sau này trong sản xuất.

Một số hướng dẫn về phong cách như ThinkUp, cũng cảnh báo chúng tôi về không sử dụng kiểu nội tuyến hoặc nhúng trừ khi không thể tránh khỏi; đó cũng là một quy tắc hữu ích đáng để áp dụng.

Làm tổ

Nesting là một tính năng tuyệt vời trong CSS, nhưng đôi khi nó có thể vượt khỏi tầm kiểm soát. Không ai cảm thấy đặc biệt hạnh phúc, đặc biệt là giữa quá trình gỡ lỗi bực bội, va vào các bộ chọn dài hơn như thế này:

 .class_1. class_2 # id_1 # id_2 li a span color: #bad; 

Vì vậy, nó luôn luôn tốt để thiết lập giới hạn lồng hợp lý, ví dụ GitHub chọn ba cấp độ trong hướng dẫn phong cách của nó. Bằng cách hạn chế lồng nhau, chúng ta cũng có thể buộc mình viết một mã có cấu trúc tốt hơn.

Quy tắc đặt tên

Sử dụng quy tắc đặt tên mạch lạc cho các bộ chọn CSS là rất quan trọng nếu chúng ta muốn hiểu mã của mình hàng tháng hoặc thậm chí nhiều năm sau đó. Có nhiều giải pháp ngoài kia, và chúng ta chỉ cần tuân theo một quy tắc nghiêm ngặt tức là một tên bộ chọn không thể bắt đầu bằng một số.

Bốn kiểu phổ biến được sử dụng trong đặt tên chọn là .chữ thường, .under_scores, .dấu gạch ngang, và .hạ men. Bạn có thể chọn bất kỳ ai trong số họ nhưng chúng tôi cần tuân theo cùng một logic trong toàn bộ dự án.

Sử dụng chỉ tên bộ chọn ngữ nghĩa cũng rất cần thiết nếu chúng ta muốn có mã ý nghĩa. Ví dụ, thay vì .nút đỏ (không hiển thị nút nào) tốt hơn là sử dụng .nút cảnh báo Tên (cho biết nó làm gì), theo cách này, chúng tôi cho phép các nhà phát triển (và bản thân trong tương lai của chúng tôi) hiểu nút nói gì.

hơn thế nữa Nếu chúng ta muốn thay đổi màu sắc của nó từ màu đỏ sang màu khác trong tương lai, chúng ta có thể dễ dàng thực hiện nó mà không gặp rắc rối. Ngoài ra còn có các quy ước đặt tên CSS có sẵn, chẳng hạn như quy ước BEM (Khối, Phần tử, Công cụ sửa đổi), đó là dẫn đến một cấu trúc đặt tên nhất quán với những cái tên độc đáo và ý nghĩa.

Quy tắc định dạng

Định dạng mã bao gồm những thứ như sử dụng khoảng trắng, tab, thụt lề, giãn cách, ngắt dòng, v.v. Không thực sự là một phương pháp tốt hay xấu trong định dạng, quy tắc duy nhất là chọn quy tắc mạch lạc dẫn đến mã có thể đọc được, và theo họ thông qua.

Ví dụ, Dropbox yêu cầu các nhà phát triển đặt dấu cách sau dấu hai chấm trong khai báo thuộc tính, trong khi Evernote sử dụng hai khoảng trắng để thụt lề. Chúng tôi có thể thiết lập nhiều quy tắc định dạng mà chúng tôi cảm thấy thoải mái, nhưng không bao giờ có thể nắm bắt nhiều hơn.

Lệnh tuyên bố

Những thứ được đặt hàng luôn dễ dàng hơn để xem qua, và đặt hàng khai báo CSS (thuộc tính với giá trị của chúng) theo một quy tắc có ý nghĩa dẫn đến một mã được tổ chức tốt hơn.

Hãy xem ví dụ về quy tắc đặt hàng tài sản của WordPress, nó xác định đường cơ sở đơn giản nhưng hợp lý sau đây để đặt hàng trong đó các thuộc tính được nhóm theo ý nghĩa của chúng:

1. Trưng bày
2. Định vị
3. Mô hình hộp
4. Màu sắc và kiểu chữ
5. Khác

Đơn vị và giá trị

Quyết định cách chúng tôi muốn sử dụng các đơn vị và giá trị không chỉ quan trọng để đạt được giao diện mã nhất quán, mà còn nếu chúng tôi không làm như vậy, chúng tôi có thể kết thúc với một điều kỳ lạ

Chỉ cần tưởng tượng một trang web sử dụng luân phiên px, em, và còn lại đo chiều dài. Nó sẽ chỉ trông tệ trong trình chỉnh sửa mã, nhưng rất có thể một số yếu tố sẽ nhỏ hoặc lớn đáng ngạc nhiên trên trang web đó.

Chúng ta cũng cần đưa ra quyết định về các giá trị màu (thập lục phân, rgb hoặc hsl) và liệu chúng ta có muốn sử dụng các thuộc tính tốc ký hay không và theo quy tắc nào. Có một hướng dẫn được bao gồm trong mọi hướng dẫn về kiểu mã CSS mà tôi đã tìm thấy, tức là. không chỉ định đơn vị cho 0 giá trị (thực sự, chỉ là không).

.lớp // lề tốt: 0; // lề xấu: 0px; // lề xấu: 0em; // lề xấu: 0rem; 

Bình luận

Mã nhận xét là điều cần thiết trong tất cả các ngôn ngữ, nhưng trong CSS nó không chỉ tạo điều kiện cho việc gỡ lỗi và tạo tài liệu, mà còn phân chia các quy tắc CSS thành các nhóm logic. Chúng ta có thể sử dụng một trong hai / * Sự kiện * / hoặc là // Càng kiểu ký hiệu cho các bình luận trong CSS, điều quan trọng là kiên định với ý kiến ​​trong suốt dự án của chúng tôi.

Ví dụ, CSS thành ngữ thiết lập một hệ thống nhận xét có ý nghĩa, thậm chí sử dụng một số nghệ thuật ASCII cơ bản và dẫn đến mã được tổ chức đẹp mắt: