hovanban
Well-known member
Để người dùng có những trải nghiệm tốt nhất, các developer luôn cần phải tìm hiểu và biết cách tối ưu hóa tốc độ xử lý dữ liệu website thông qua cách viết CSS tốt nhất. Bên cạnh đó, các yếu tố cơ bản như HTML, Javascript cũng như các hình ảnh cũng cần được lưu ý sát sao trong khâu Front-end. Vậy, cách thực hiện css tiêu chuẩn và những điều cần lưu ý ở đây là gì? Hãy cùng tìm hiểu qua bài viết này nhé!
1. Đặt tên class và id một cách khoa học
Đặt tên class và id một cách khoa học cũng là điều quan trọng cần lưu ý nếu muốn thực hiện cách viết CSS đúng chuẩn. Việc đặt tên class và id một cách khoa học cũng sẽ giúp bạn kiểm soát và check lại code dễ dàng hơn khi xảy ra sự cố. Nếu bạn muốn ứng dụng CSS preprocessor hay BEM về sau cũng sẽ đơn giản hơn khi tên class và id được đặt có chủ đích, dễ nhớ.
2. Giảm kích thước file CSS
Để giảm kích thước file CSS hiệu quả mà không ảnh hưởng đến chất lượng web, bạn nên xóa bỏ các khoảng trắng không cần thiết trong file. Các ký tự thừa như dấu xuống dòng, chấm phẩy ở cuối trường class hoặc id… cũng nên bỏ đi vì không quá cần thiết.
3. Hạn chế sử dụng Inline CSS trong các elements
Việc sử dụng quá nhiều line CSS trong các elements sẽ khiến bạn gặp nhiều khó khăn trong việc kiểm soát code CSS. Để tránh trường hợp này xảy ra, bạn chỉ nên sử dụng 1 lần Inline mà thôi.
4. Sử dụng cách viết CSS ngắn gọn
Một trong những cách tối ưu tốc độ website hiệu quả nhất chính là sử dụng cách viết CSS ngắn gọn. Cách làm này sẽ giúp bạn dễ kiểm soát tính năng của code dễ hơn, cũng như giảm tải dung lượng file CSS hiệu quả.
5. Hạn chế sử dụng @import
Nếu không cần thiết, bạn nên tránh sử dụng quá nhiều @import trong file CSS. Việc sử dụng quá nhiều @import không cần thiết sẽ làm chậm quá trình load của website cũng như khả năng đồng bộ tải file của browser.
6. Khai báo class bổ trợ
Helper class là một trong những class có sẵn định nghĩa, bao gồm các thuộc tính đơn giản, dễ sử dụng. Cách làm này sẽ giúp tiết kiệm được rất nhiều thuộc tính cần khai báo. Từ đó, kích thước file CSS được giảm đi đáng kể.
7. Giảm số lượng file CSS
Thay vì chia các tệp thành nhiều file CSS, bạn chỉ việc gom các file có thuộc tính giống nhau lại thành 1. Như vậy, số lượng request cần thực hiện trên server sẽ được cắt bớt, giúp giảm tải dữ liệu cần xử lý cho server rất nhiều.
8. Kỹ thuật OOCSS
Trong Front-end, để tối ưu cách viết CSS chuẩn xác nhất, bạn cần nắm vững kỹ thuật OOCSS (Object Oriented CSS) hay còn gọi là CSS hướng đối tượng. Để thực hiện kỹ thuật này, bạn chỉ việc gom các thuộc tính giống nhau của 2 class trong cùng 1 element thành 1 class để tránh gặp phải lỗi lặp lại.
Trên đây là một vài những lưu ý mà tất cả các developer cần biết khi thực hiện các bước trong Front-end. Để tối ưu hóa tốc độ tải của website bạn thiết kế, hãy nắm vững những lưu ý này cũng như hiểu rõ cách viết CSS chuẩn để sản phẩm được hoàn thiện và đem lại trải nghiệm người dùng tốt nhất.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
1. Đặt tên class và id một cách khoa học
Đặt tên class và id một cách khoa học cũng là điều quan trọng cần lưu ý nếu muốn thực hiện cách viết CSS đúng chuẩn. Việc đặt tên class và id một cách khoa học cũng sẽ giúp bạn kiểm soát và check lại code dễ dàng hơn khi xảy ra sự cố. Nếu bạn muốn ứng dụng CSS preprocessor hay BEM về sau cũng sẽ đơn giản hơn khi tên class và id được đặt có chủ đích, dễ nhớ.
2. Giảm kích thước file CSS
Để giảm kích thước file CSS hiệu quả mà không ảnh hưởng đến chất lượng web, bạn nên xóa bỏ các khoảng trắng không cần thiết trong file. Các ký tự thừa như dấu xuống dòng, chấm phẩy ở cuối trường class hoặc id… cũng nên bỏ đi vì không quá cần thiết.
3. Hạn chế sử dụng Inline CSS trong các elements
Việc sử dụng quá nhiều line CSS trong các elements sẽ khiến bạn gặp nhiều khó khăn trong việc kiểm soát code CSS. Để tránh trường hợp này xảy ra, bạn chỉ nên sử dụng 1 lần Inline mà thôi.
4. Sử dụng cách viết CSS ngắn gọn
Một trong những cách tối ưu tốc độ website hiệu quả nhất chính là sử dụng cách viết CSS ngắn gọn. Cách làm này sẽ giúp bạn dễ kiểm soát tính năng của code dễ hơn, cũng như giảm tải dung lượng file CSS hiệu quả.
5. Hạn chế sử dụng @import
Nếu không cần thiết, bạn nên tránh sử dụng quá nhiều @import trong file CSS. Việc sử dụng quá nhiều @import không cần thiết sẽ làm chậm quá trình load của website cũng như khả năng đồng bộ tải file của browser.
6. Khai báo class bổ trợ
Helper class là một trong những class có sẵn định nghĩa, bao gồm các thuộc tính đơn giản, dễ sử dụng. Cách làm này sẽ giúp tiết kiệm được rất nhiều thuộc tính cần khai báo. Từ đó, kích thước file CSS được giảm đi đáng kể.
7. Giảm số lượng file CSS
Thay vì chia các tệp thành nhiều file CSS, bạn chỉ việc gom các file có thuộc tính giống nhau lại thành 1. Như vậy, số lượng request cần thực hiện trên server sẽ được cắt bớt, giúp giảm tải dữ liệu cần xử lý cho server rất nhiều.
8. Kỹ thuật OOCSS
Trong Front-end, để tối ưu cách viết CSS chuẩn xác nhất, bạn cần nắm vững kỹ thuật OOCSS (Object Oriented CSS) hay còn gọi là CSS hướng đối tượng. Để thực hiện kỹ thuật này, bạn chỉ việc gom các thuộc tính giống nhau của 2 class trong cùng 1 element thành 1 class để tránh gặp phải lỗi lặp lại.
Trên đây là một vài những lưu ý mà tất cả các developer cần biết khi thực hiện các bước trong Front-end. Để tối ưu hóa tốc độ tải của website bạn thiết kế, hãy nắm vững những lưu ý này cũng như hiểu rõ cách viết CSS chuẩn để sản phẩm được hoàn thiện và đem lại trải nghiệm người dùng tốt nhất.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn