Những Cách Để Tối Ưu Hóa CSS Tốt Hơn Mà Bạn Nên Biết

Posted on by mtoplistChuyên mục:Top List

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những cách và quy tắt viết CSS thường được áp dụng trong lập trình để giúp bạn có thể dễ dàng chỉnh sửa cũng như duy trì đoạn mã tốt hơn khi viết cho các dự án web lớn nhé!

Thông thường khi chúng ta viết mã thì việc làm sao cho nó hoạt động được xem là vấn đề quan trọng nhất. Nhưng khi đoạn mã đã chạy được rồi thì vấn đề tiếp theo bạn cần phải chú ý tới là làm sao để tối ưu đoạn code đó tốt nhất có thể (thường được gọi là clean code). Vì việc làm này sẽ giúp bạn có thể dễ dàng chỉnh sửa, bảo trì codecũng như tăng khả năng load của website được tốt hơn.
Bây giờ chúng ta sẽ đi vào tìm hiểu các phương pháp phổ biến để viết CSS được tốt hơn nhé!

Thiết Lập Reset Cho File CSS

Nếu như bạn để ý thì mỗi trình duyệt sẽ có một cách thiết lập style mặc định riêng cho phần tử HTML do đó khoảng cách padding, margin, border… của các phần tử này sẽ thường hiển thị không giống nhau ở các trình duyệt khác nhau.

Việc chúng ta sử dụng đoạn mã reset file CSS sẽ giúp các phần tử của trang web có thể hiển thị một cách nhất quát trên nhiều trình duyệt khác nhau. Dưới đây là đoạn mã Reset CSS của tác giả Eric Mayer’s mà theo mình thấy được nhiều bạn lập trình viên đánh giá rất cao:

/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
 
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 display: block;
 }
 body {
 line-height: 1;
 }
 ol, ul {
 list-style: none;
 }
 blockquote, q {
 quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 content: '';
 content: none;
 }
 table {
 border-collapse: collapse;
 border-spacing: 0;
 }

Bạn chỉ cần copy đoạn mã này và bỏ vào vị trí đầu tiên trong file CSS là có thể sử dụng rồi nhé! Nếu bạn muốn tìm hiểu thêm về tác giả Eric Mayer’s và cách giải thích đoạn mã CSS Reset hoạt động thì có thể truy cập ở đây nha.

Ngoài ra bạn cũng có thể sử dụng file Normalize.css để reset lại CSS cho trang web của mình nhé!

Normalize.css

Nguồn

Không Ghi Lại Các Thuộc Tính Trùng Lặp (Don’t Repeat Yourself)

Đây được xem là một yếu tố rất quan trọng và thường được sử dụng trong hầu hết trong các ngôn ngữ lập trình kể cả CSS. Với mục đích chính là làm giảm sự lặp lại giữa các đoạn mã trong trang web. Để giúp bạn dễ hình dung thì mình sẽ tạo hai ví dụ về việc đặt thuộc tính CSS cho nút bằng đoạn mã dưới đây nhé:

Đoạn Mã Chưa Tối Ưu

/*Thiết Lập Thuộc Tính Cho Nút Gửi*/
 .nut_gui {
   background: blue;
   color: white;
   border-radius:6px;
   padding: 8px 16px;
   font-size: 16px;
   text-align: center;
 }
 /*Thiết Lập Thuộc Tính Cho Nút Nhận*/
 .nut_nhan {
   background: green;
   color: white;
   border-radius: 6px;
   padding: 8px 16px;
   font-size: 16px;
   text-align: center;
 }

Như bạn thấy ở đoạn mã phía trên thì giữa hai class .nut_gui và .nut_nhan sẽ có một số thuộc tính giống và khác nhau là:

  • Giống nhau: color, border-radius, padding, font-size và text-align.
  • Khác nhau: background.

Do có nhiều điểm giống nhau như vậy nên chúng ta nên sẽ sử dụng một class nut để gom tất cả các thuộc tính trùng nhau giữa hai class. Như vậy sẽ giúp đoạn code có thể dễ dàng chỉnh sửa cũng như không lặp lại thông tin trong đoạn mã CSS. Để dễ hình dung hơn bạn xem đoạn mã sau khi đã được tối ưu nhé:

Đoạn Mã Đã Được Tối Ưu

/*Thiết lập thuộc tính cho nút tổng quát*/
  .nut{
    color: white;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 16px;
    text-align: center;
  }
/*Thiết Lập Thuộc Tính Cho Nút Gửi*/
  .nut_gui {
    background: blue;
  }
/*Thiết Lập Thuộc Tính Cho Nút Nhận*/
  .nut_nhan {
    background: green;
  }

Và khi bạn muốn sử dụng cho phần tử html thì chỉ cần gọi <button class="nut nut_gui">.
Tuy nhiên trong thực tế thì sẽ có nhiều yếu tố phức tạp hơn do đó bạn nên kiểm tra thật kỹ các mối liên hệ, độ tương quan giữa các thuộc tính CSS của phần tử trước khi thực hiện việc tối ưu hóa nhé!

Tổ Chức Code CSS Rõ Ràng

Thông thường khi chúng ta cần thiết lập style cho phần từ nào đó trong trang web thì ta sẽ thêm thuộc tính đó vào vị trí cuối cùng trong file CSS . Và tất nhiên đoạn mã của bạn vẫn chạy hoàn toàn bình thường.
Tuy nhiên ở đây sẽ xảy ra một vấn đề nghiêm trọng là một thời gian sau khi bạn muốn tìm lại các thuộc tính CSS này thực sự rất khó khăn, tốn thời gian vì không thể xác định được vị trí của thuộc tính đó.

Do đó bạn cần phải chia file CSS ra nhiều thành phần khác nhau thì sẽ dễ dàng quản lý hơn như là:

  • Reset: Chỉ chứa các thuộc tính CSS định dạng lại kiểu cho trình duyệt.
  • Header: Chỉ chứa các thuộc tính CSS cho header, logo, menu, màu sắc…
  • Body: Chỉ chứa các thuộc tính CSS cho nội dung, hình ảnh, video, độ rộng…
  • Footer: Chỉ chứa các thuộc tính CSS cho footer, đường dẫn liên kết…
  • Các phần khác của trang web…

Để bạn dễ hình dùng thì hãy xem đoạn mã dưới đây nhé:

Tổ Chức Code CSS:

/*Màu sắc*/
 .mau_den{
   color: #000;
 }
 .mau_trang{
   color: #fff;
 }

 /*Font Chữ*/
 h1,h2,h3{
   font-family: 'Roboto', sans-serif;
 }
 p{
   font-family: 'Open Sans', sans-serif;
 }

Sử Dụng Shorthands Trong CSS

Đây là một yếu tố giúp bạn có thể giảm số lượng dòng của đoạn mã CSS một cách hiệu quả cũng như làm giảm dung lượng của file xuống một cách đáng kể. Shorthands là cách mà chúng ta ghi gộp nhiều thuộc tính CSS thành một dòng. Nó thường được áp dụng nhiều cho thuộc tính margin, padding, background, border...ở trong CSS. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:

Cách Viết Thông Thường Của Thuộc Tính Border:

.doi_tuong{
   border-width: 1px;
   border-style: solid:
   border-color: black;
 }

Cách Viết Tắt Của Thuộc Tính Border:

.doi_tuong{
    border: 1px solid black;
 }

Như bạn thấy thì code của hai đoạn mã trên vẫn chạy bình thường nhưng ở đoạn code thứ hai thì được viết ngắn gọn hơn. Nếu bạn muốn tìm hiểu thêm về phương pháp shorthands thì có thể truy cập ở đây nhé.

Cách Đặt Trên Cho Class, Id Trong CSS

Thông thường chúng ta sẽ đặt tên class và id tùy theo vào ý muốn của mình, miễn là nó khớp với tên class hay id trong phần tử HTML. Tuy nhiên theo mình thấy thì tên trong CSS thì cần phải hội tụ được hai yếu tố là gần giống với chữ viết con người (có thể hiểu được) và bao quát được chức năng của class hay id trong trang web.
Để dễ hình dung chúng ta hãy đi vào ví dụ sau nhé:

Không Nên Đặt Tên Theo Dạng Này

.p {
   /*Thiết lập style...*/
 }
 .formThuNhat {
     /*Thiết lập style...*/
 }

Chúng ta không nên dùng tên của thẻ HTMLM để đặt tên cho class hay id trong CSS nhé. Vì nó không nói lên được chức năng cũng như nhiệm vụ ở trong trang web. Đồng thời có thể gây ra nhầm lẫn khi chúng ta gọi thẻ <p> trong CSS.
Tên class formThuNhat được viết theo dạng camel case, thường được dùng để đặt tên cho các hàm ở trong ngôn ngữ lập trình. Tuy nhiên khi ta đặt tên class hay id dưới dạng này trong CSS sẽ gây ra hiệu ứng khó đọc do đó mình không khuyến khích sử dụng nha.

Nếu tên class hay id của bạn có nhiều từ thì có thể sử dụng dấu - để ngăn cách như ví dụ dưới đây nha:

Nên Đặt Tên Theo Dạng Này

.noi-dung-tieu-de {
   /*Thiết lập style...*/
 }

Nếu bạn làm việc trên các dự án web lớn thì người ta thường sẽ đặt tên class theo một quy tắc đặt tên phổ biến được gọi là BEM (Block-Element-Modifier). Nó giúp mọi người khi làm chung một dự án có thể hiểu được quy tắc đặt tên CSS và nhiệm vụ của từng component trên trang web. Từ đó tạo ra sự nhất quán cho dự án.
Dưới đây là một ví dụ đặt tên theo BEM nhé:

Ví Dụ Bem

Nếu bạn muốn tham khảo thêm về cách đặt tên theo quy tắc BEM thì có thể truy cập ở đây nha.

Không Nên Sử Dụng Quá Nhiều !important tag

Trong đoạn mã CSS, khi bạn thiết lập một thuộc tính nào đó mà nó không chạy thì chúng ta sẽ thường ngay lập tức gán vào thuộc tính đó tag !important. Và thường kết quả sẽ thay đổi ngay lập tức.
Tuy nhiên khi bạn sử dụng quá nhiều !important tag cho thuộc tính CSS thì sẽ gây ra tình trạng khó bảo trì cho trang web đồng thời cũng phá vỡ quy tắc flow(dòng chảy) của các phần tử website. Do đó mình khuyên bạn nên hạn chế sử dụng tag !important ít nhất có thể.

Nếu bạn muốn tham khảo thêm trường hợp nào nên và không nên sử dụng !important tag thì có thể truy cập ở đây nhé!

Thêm Comment Vào File CSS

Sẽ thật dễ dàng hiểu được đoạn mã CSS khi bạn vừa mới viết và thiết lập cho trang web. Tuy nhiên sau một khoảng thời gian bạn quay lại và chợt nhận ra là mình thật sự không nhớ những thuộc tính này có nhiệm vụ gì ở trong trang web (mình rất hay bị như vậy).
Do đó mình đã tìm trên mạng và phát hiện ra một cách khá là hay đó là hãy comment vào mã CSS. Việc làm này sẽ giúp bạn có thể tiết kiệm một khoảng thời gian sau này đấy. Đồng thời việc làm này sẽ giúp người khác khi duy trì hay chỉnh sửa dự án của bạn có thể hiểu rõ đoạn mã hơn từ đó cũng rút ngắn thời gian và công sức cho việc code hơn.

Cách Viết Comment Cho Code

 /*Comment trong CSS*/
 .ten-class {
   /*Thiết lập style CSS...*/
 }

Ngoài việc miêu tả chức năng của class hay id nào đó thì cũng có một số trường hợp bạn nên viết comment CSS là:

  • Các bản sửa lỗi: Khi làm chung dự án, nếu bạn sửa chữa một thuộc tính nào đó thì chúng ta nên comment lại lý do và cách sửa ngay trên đoạn mã đó. (Để người khác khi nhìn vào đoạn mã sẽ hiểu hơn)
  • Nhắc nhở: Nhiều khi bạn chưa fix xong bug (do quá giờ làm việc) thì ta có thể comment ngay trên file để nhắc nhở chúng ta những việc cần phải làm vào ngày hôm sau.

Xác Định Thuộc Tính CSS Được Trình Duyệt Hỗ Trợ

Đây là một yếu tố cũng quan trọng không kém khi bạn bắt đầu thiết kế và phát triển dự án web. Hầu hết các trình duyệt sẽ hỗ trợ những thuộc tính CSS cơ bản và thông dụng.
Tuy nhiên cũng có một số thuộc tính thì chưa được các trình duyệt hỗ trợ hoặc nếu muốn sử dụng thì phải có tiền tố đi kèm. Do đó bạn sẽ thấy thuộc tính CSS chạy được trên trình duyệt này nhưng lại không hiển thị trên trình duyệt kia.

Để giải quyết vấn đề trên thì bạn có thể kiểm tra thuộc tính CSS cho trình duyệt thông qua công cụ Can Iuse. Nó sẽ đưa ra tất cả thông tin về trình duyệt nào sẽ hỗ trợ và không hỗ trợ thuộc tính đó. Đồng thời cũng cấp thêm các giải pháp để bạn có thể sửa lỗi một cách nhanh chóng cho những trình duyệt không hỗ trợ thuộc tính đó.

Dưới đây là hình ảnh àm mình test về thuộc thuộc tính CSS Grid Layout:

Công Cụ Can I Use

Nguồn

Sử Dụng Flexbox và Grid Trong CSS

Theo mình nghĩ thì chúng ta nên sử dụng flexbox hoặc grid để xây dựng bố cục trang web vì nó đã cung cấp rất nhiều tiện ích giúp bạn có thể responsive layout trên nhiều màn hình thiết bị khác nhau cũng như đông thời giảm được sự phụ thuộc vào framework(Sử dụng framework sẽ gây ra tình trạng thời gian load website bị chậm).
Nếu bạn muốn tham khảo các nguồn học về flexbox thì có thể truy cập ở đây nhé!
Nếu bạn muốn tham khảo các nguồn học về grid thì có thể truy cập ở đây nhé!

Kiểm Tra Các Thuộc Tính CSS Không Sử Dụng

Khi bạn phát triển trang web thì việc có nhiều thuộc tính CSS không được sử dụng đến những vẫn được load ở trong file CSS của trang web. Từ đó sẽ gây ra tình trạng làm chậm thời gian tải trang của bạn.
Do đó mình sẽ giới thiệu đến bạn một công cụ PurifyCSS giúp tối ưu đoạn mã CSS và loại bỏ những đoạn code CSS không được sử dụng đến trong trang web:

PurifyCSS

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức giúp bạn viết CSS tốt hơn dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

mtoplist