Tổng hợp những kỹ thuật quản lý CSS của trang web hiệu quả
CSS (Cascading Style Sheet) là ngôn ngữ được dùng phổ biến để tạo phong cách, biến hóa các trang web. CSS kết hợp các bộ lọc, thuộc tính và cả các hiệu ứng animation, transition để định kiểu, làm sinh động thêm cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML giúp tiết kiệm công sức cũng như thời gian cho người viết web.
Việc viết CSS cho trang web không phải là một công việc quá khó nhưng không phải tất cả CSS đó đều hiệu quả đối với việc quản lý trang web. Nếu bạn tham trang trí trang web bằng cách thấy cái gì hay ho, thú vị thì lại thêm css vào cho nó thì chắc chắn sẽ khiến trang web trở nên cồng kềnh, dung lượng file lớn, nặng nề và chậm chạp khi load web. Hơn nữa, nếu xảy ra lỗi bug, thì sẽ khó phát hiện và sửa chữa hay nâng cấp sau này bởi vì CSS không được sắp xếp đúng cách, khoa học…
Bài viết này Bizfly Cloud sẽ giới thiệu đến bạn tổng hợp những kỹ thuật quản lý CSS của trang web hiệu quả và tốt hơn.
Sử dụng CSS Preprocessor
CSS Preprocessor Preprocessor có rất nhiều loại, có thể kể tên như: Sass, Less, Stylus,... 2 loại CSS Preprocessor được dùng phổ biến đó là Sass và Less. Chúng sẽ giúp bạn tối ưu hóa việc quản lý website bằng kỹ thuật CSS.
Thuộc tính Values (các biến)
Trong CSS Preprocessor, bạn có thể tạo ra các biến (values) trong CSS và sử dụng những biến đó ở nhiều vị trí khác nhau một cách nhanh chóng, đặc biệt thuận lợi nếu bạn cần phải sửa các giá trị ở các vị trí đó thì bạn chỉ cần thao tác thay đổi giá trị ứng với biến mà đã được gán từ ban đầu.
Ví dụ như bạn lấy một biến tên là $cl-primary với giá trị là #FFFFFF thì khi bạn cần sử dụng giá trị của nó, bạn chỉ cần gọi biến ra, tiết kiệm rất nhiều thời gian và công sức nhờ loại bỏ được việc lặp đi lặp lại câu code.
$cl-primary: #FFFFFF; body { color: $cl-primary; } .post__meta { color: $cl-primary; } |
Thêm vào đó, CSS Preprocessor cũng hỗ trợ bạn rất nhiều để viết CSS cho vùng được chọn tốt hơn nhờ áp dụng phương pháp BEM:
.footer { &__logo { // some CSS } &__social { // some CSS } } |
Chúng sẽ dịch là:
.footer{} .footer__logo { // some CSS } .footer__social { // some CSS } |
Còn rất nhiều tính năng, thuộc tính hữu ích khác của CSS Preprocessor mà những người sử dụng CSS để quản lý trang web nên tìm hiểu thêm.
Chia ra thành nhiều file CSS khác nhau (SASS)
Bạn nên chia ra làm việc với nhiều file CSS khác nhau để tương ứng với mỗi công dụng của chúng, ví dụ: file có tên button.scss dùng để chứa code css đối với thành phần button, file block.scss chứa các code css của thành phần block v.v. Khi chia ra thành nhiều file bạn sẽ quản lý CSS cho trang web tốt hơn và dễ dàng thay đổi hoặc chỉnh sửa css nhớ sự chia tách cụ thể, sắp xếp rõ ràng.
Việc chia nhỏ thành các file css đặt ra một vấn đề đó là khi sử dụng vào trang web, bạn phải nhúng tất cả đường dẫn của các file đó vào, việc này sẽ gây ra nhiều yêu cầu (request) làm nặng server. Tuy nhiên, CSS Preprocessor Sass sẽ giúp bạn giải quyết triệt để vấn đề này. Dùng SASS để tạo ra các file theo format _name.scss, các file này chứa các thành phần riêng biệt, sau đó bạn cần import chúng vào file chính tên là style.scss. Do đó, SASS được biên dịch sang CSS thì các file có tên _name.scss sẽ không được xuất riêng ra CSS mà các file này sẽ được xuất vào file css chung là file tên là style.css.
Ví dụ:
style.scss – File SASS sẽ được dùng để xuất các file có ký tự _ ở tên. Sau đó được biên dịch ra CSS.
_var.scss – File chứa các biến sử dụng thường xuyên trong CSS.
_normalize.scss – File reset CSS dùng Normalize.
_global.scss – File chứa CSS đối với các thành phần toàn cục trên trang web bao gồm: html, body, a.
_typography.scss – File chứa CSS dùng để định dạng chữ trên trang web.
_layout.scss – File chứa CSS dùng để dàn trang, chia cột, phân chia bố cục
_modules.scss – File chứa CSS đối với đối tượng của trang web bao gồm: button, menu, v.v.
Đối với Responsive thì bạn cũng làm tương tự, sẽ tạo các file cho từng thuộc tính, breakpoint như: _mobile.scss, _tablet.scss và _desktop.scss.
Nhờ CSS Preprocessor mà bạn không cần viết thêm CSS mà chỉ cần gọi tên các file ở style.scss.
@import "var"; @impprt "normalize"; @import "global"; @import "typography"; @import "layout"; @import "modules"; // Responsive @import "mobile"; @import "tablet"; @import "desktop"; |
Kỹ thuật OOCSS
OOCSS (Object Oriented CSS) được hiểu là CSS hướng đối tượng. Khái niệm hướng đối tượng khá phổ biến với các ngôn ngữ lập trình cho Server nhưng bạn cũng có thể thao tác kỹ thuật hướng đối tượng OOCSS để phân chia các đối tượng và tái sử dụng cho những đối tượng khác có cùng cấu trúc.
CSS minh họa:
.btn-red { background: red; padding: 5px 10px; color: #fff; text-decoration: none; margin: 0 1em; } .btn-blue { background: blue; padding: 5px 10px; color: #fff; text-decoration: none; margin: 0 1em; } |
Trong ví dụ trên .btn-red và .btn-blue tương đồng nhau ở hầu hết các thuộc tính chỉ khác nhau ở màu nền. Vì vậy, thay vì viết lại, bạn chỉ cần tạo một class .button cho đối tượng dùng để thêm các đoạn CSS cần thiết cho một button, sau đó bạn thêm các thuộc tính như .red, .blue, .green cho các button để thêm màu sắc và màu chữ.
Ví dụ minh họa của áp dụng OOCSS cho HTML và CSS.
HTML:
<a href="#" class="btn red">Nút đỏ</a> <a href="#" class="btn blue">Nút xanh</a> <a href="#" class="btn green">Nút xanh lá</a> |
CSS:
.btn { padding: 5px 10px; text-decoration: none; margin: 0 1em; color: #fff; } .btn.red { background: red; } .btn.blue { background: blue; } .btn.green { background: green; } |
Lợi ích của OOCSS là giúp bạn tiết kiệm thời gian và công sức khi viết CSS. Ngoài ra còn tiện lợi hơn cho việc sửa chữa và nâng cấp về sau.
Kỹ thuật BEM để đặt tên
Ngoài OOCSS, bạn có thể dụng kỹ thuật BEM (Block Element Modifier) để quản lý CSS trong trang web. BEM là một kỹ thuật giúp đặt tên và tạo cấu trúc trang web dựa trên một thành phần chính.
BEM có 3 thành phần mà bạn cần tìm hiểu trước khi sử dụng:
Block – Khu vực cần viết CSS.
Element – Phần tử nội Block.
Modifier – Trạng thái của phần tử khi được điều chỉnh hành vi hoặc để chỉ tính chất của phần tử.
Dùng BEM cho HTML:
<div class="header"> <img src="logo.png" class="header__logo" /> <p class="header__description header_description--center" /> </div> |
Sau đó, bạn sẽ có được vùng chọn CSS như sau:
/*--[Header]--*/ .header {} .header__logo {} .header__description{} .header__description--center{} |
Chú thích:
.header là Block
.headerlogo và .headerdescription là Element
.headerdescription–center là Modifier.
Tuy nhiên để dùng BEM đúng cách và đạt hiệu quả thì bạn cần tìm hiểu kỹ các thành phần của nó bởi nếu không bạn sẽ gặp khó khăn và bị bối rồi trong dùng BEM để đặt tên sao cho hợp lý và ngắn gọn.
Dùng Class và ID hiệu quả
Hiện nay, có hai kiểu vùng chọn được sử dụng phổ biến là Class và ID. Song, Class và ID lại khá tương đồng nhau nên trước hết, bạn cần phân biệt rằng Class có thể áp dụng cho nhiều phần tử khác nhau trên cùng một trang, còn ID lại chỉ dùng được với một phần tử trên cùng một trang.
Như vậy, Class thích hợp với các phần tử có tính chất lặp lại nhiều lần và ID cho các phần tử sử dụng một lần duy nhất.
Tuy nhiên, để tránh bị rối thì bạn có thể dùng Class cho tất cả.
Tối ưu việc đặt tên cho vùng chọn
Để đạt hiệu quả cao trong quản lý CSS của trang web thì bạn nên đặt tên vùng chọn một cách khoa học và rõ ràng.
Ví dụ minh họa:
.titlepost .content-post … Với tên vùng chọn này có thể khiến bạn bị rồi khi nhìn lại CSS đó.
Nên tối ưu việc đặt tên như sau:
.post .post-title .post-content .post-meta .article .article-wrapper .article-content .header .header-menu .header-ads |
Nếu bạn dùng Sass hoặc Less viết CSS thì có thể đặt tên như sau:
.post { &-title{} &-content{} &-meta{} } |
Tổng kết
Trên đây là tổng kết những kỹ thuật quản lý CSS của trang web giúp bạn đạt hiệu quả công việc cao hơn và viết CSS dễ dàng hơn. Cùng đón đọc thêm những bài viết bổ ích khác nhé.
Theo BizFly Cloud tổng hợp
>> Có thể bạn quan tâm: Thuộc tính Float và Clear trong CSS
