Các kỹ thuật quản lý CSS của website tốt hơn

Việc học CSS để tự thiết kế giao diện cho website không hề khó, bởi vốn dĩ nó khá đơn giản. Bạn chỉ cần nắm các quy tắc cú pháp viết CSS, biết lập vùng chọn và thường xuyên tham khảo các thuộc tính là có thể viết được trơn tru.

Nhưng để thành thạo, bạn cần không ngừng nổ lực học hỏi. Học ở đây có nghĩa là biết cách triển khai CSS trên website tối ưu, các thủ thuật CSS hay ho hoặc làm quen với các công cụ hỗ trợ nâng cao như Grunt, Gulp, SASS, LESS... và thậm chí cả việc quản lý CSS trên website.

Tầm quan trọng của việc quản lý CSS 

Nếu là một Newbie mới tiếp súc với CSS thì chắc chắn sẽ làm việc với nó theo kiểu thấy cái gì cần trang trí là cứ gắn CSS vào.

Nhưng nếu cứ thêm CSS một cách "vô tội vạ" mà không để ý, thì về lâu dài bạn sẽ gặp khó khăn trong việc quản lý tập tin CSS của mình. Bởi nó có thể không được sắp xếp đúng cách, bị trùng lặp nhiều đoạn CSS gây khó khăn khi bạn cần thiết kế lại hay nâng cấp website.

Nhưng đừng quá lo lắng, bởi trong bài viết này, Tự Học Lập Trình sẽ bật mí đến bạn một số kỹ thuật quản lý CSS khá hay ho đấy! Nào hãy cùng tham khảo qua nhé!

Sử dụng SASS/LESS (CSS Prepocessor)

Các CSS Preprocessor như SASS hay LESS là một trong những công cụ bạn nên sử dụng khi cần làm việc với CSS trên một tầm cao mới.

Bởi trong công cụ này, bạn có thể tạo ra các biến trong CSS và sử dụng nhanh chóng.

Ví dụ, bạn đặt một biến tên là $color-primary với giá trị là #E8E8E8 thì lúc này bạn chỉ cần gọi biến ra, tránh viết đi viết lại nhiều lần.

$primary-color:#E8E8E8;body{color:$primary-color;}.post__meta{color:$primary-color;}

Ngoài ra, nó cũng giúp bạn dễ dàng viết CSS cho nhóm vùng chọn tốt hơn, áp dụng phương pháp BEM cũng rất tiện:

.header{&__logo{//someCSS}&__social{//someCSS}}

Nếu biết tận dụng, thì việc sử dụng CSS Preprocessor sẽ dễ hơn bạn tưởng rất nhiều.

Chia ra nhiều tập tin khác nhau (ưu tiên dùng kèm SASS)

Ở kỹ thuật này, mỗi tập tin sẽ chứa CSS cho từng thành phần trên website để tránh nhồi nhét quá nhiều CSS vào một tập tin, từ đó gây khó khăn cho bạn khi làm việc.

Do sử dụng SASS nên tập tin tạo ra thường hiển thị theo kiểu _name.scss để chứa các thành phần riêng biệt, sau đó import nó vào tập tin chính tên style.scss chẳng hạn.

Như vậy, khi biên dịch từ SASS sang CSS, các tập tin _name.scss sẽ không được xuất ra CSS mà sẽ xuất vào style.scss.

Luôn nhớ rằng, trong SASS các tập tin có tên kiểu _name.scss thường sẽ không biên dịch ra file CSS riêng.

Một số mẫu thường được sử dụng:

• style.scss - Tập tin SASS sẽ được sử dụng để import các tập tin có ký tự _ ở tên vào. Sau đó biên dịch ra CSS.
• _var.scss - Tập tin chứa các biến hay dùng trong CSS.
• _normalize.scss - Tập tin reset CSS sử dụng Normalize.
• _global.scss - Tập tin chứa CSS cho thành phần toàn cục trên website như html, body, a.
• _typography.scss - Tập tin chứa CSS để định dạng chữ trên website.
• _layout.scss - Dành viết CSS cho việc lên bố cục cho website, điển hình như chia cột.
• _modules.scss - Tập tin này sẽ viết CSS cho các đối tượng trong website như nút bấm, trang trí menu...

Còn nếu muốn làm Responsive thì cần tạo thêm các tập tin cho từng breakpoint như _mobile.scss, _tablet.scss và _desktop.scss.

Tiếp đó ở style.scss, thực hiện gọi tất cả vào và không cần viết thêm CSS gì vào đây. Cụ thể:

@import"var";@impprt"normalize";@import"global";@import"typography";@import"layout";@import"modules";//Responsive@import"mobile";@import"tablet";@import"desktop";

Áp dụng kỹ thuật OOCSS

OOCSS - Object Oriented CSS có nghĩa là CSS hướng đối tượng.

OOCSS là một kỹ thuật viết CSS bằng việc phân chia các đối tượng và tái sử dụng lại trên các đối tượng có cùng một cấu trúc.

Để hiểu rõ hơn, bạn có thể xem qua đoạn CSS sau:

.button-red{background:red;padding:5px10px;color:#fff;text-decoration:none;margin:01em;}.button-blue{background:blue;padding:5px10px;color:#fff;text-decoration:none;margin:01em;}

Trong thực tế, class .button-red và .button-blue có khá nhiều thuộc tính giống nhau, chúng chỉ khác mỗi cái màu nền.

Thế nên, thay vì phải mất thời gian viết lại, chúng ta có thể tạo ra một class (gọi là đối tượng) tên .button để thêm các đoạn CSS cần thiết cho một nút bấm. Sau đó, ở các nút bấm bạn có thể thêm các class như .red, .blue, .green (gọi là thuộc tính) để thêm màu sắc và màu chữ cho nút bấm.

Dưới đây là ví dụ HTML và CSS sử dụng OOCSS mà bạn có thể tham khảo.

Lợi ích của kỹ thuật này sẽ giúp bạn làm nhẹ tập tin CSS để tiết kiệm thời gian tải, đồng thời dễ dàng bảo trì về sau cũng như dễ dàng viết CSS thêm cho các phần tử khác có cùng đối tượng.

Đặt tên với kỹ thuật BEM

Nếu bạn gặp khó khăn khi sử dụng OOCSS trong việc quản lý CSS thì có thể chuyển qua dùng thử một kỹ thuật khác để quản lý CSS là BEM (Block Element Modifier).

BEM là một kỹ thuật đặt tên và tạo cấu trúc website dựa theo một thành phần chính nào đó.

Muốn sử dụng được BEM, bạn phải hiểu rõ về 3 thành phần chính trong đó, là:

• Block: Khu vực của đối tượng cần viết CSS.
• Element: Các phần tử bên trọng của Block.
• Modifier: Trạng thái của các Element khi thay đổi các hành vi, hoặc có thể sử dụng để chỉ tính chất của phần tử.

Ví dụ cụ thể về cách viết HTML dựa trên cấu trúc BEM:

[html]

<div class="header">

    <img src="/default/theme/logo.png" class="header__logo" />

    <p class="header__description header_description–center" />

</div>

[/html]

Sau đó, chúng ta sẽ có các vùng chọn CSS kiểu như này:

.header{}.header__logo{}.header__description{}.header__description–center{}

Trong đó, .header là Block, .header__logo và .header__description là Element và .header__description–center là Modifier.

Thế nhưng, nhìn thì đơn giản nhưng khi áp dụng BEM vào dự án bạn sẽ gặp chút khó khăn ở bước đầu là quá bối rối trong cách đặt tên và việc phân bổ không hợp lý sẽ khiến tên vùng chọn của bạn thành .no-dai-ra-nhu-the-nay.

Bạn có thể xem thêm các hướng dẫn về BEM tại đây!

Sử dụng class và ID hợp lý

Class và ID đều là hai kiểu vùng chọn phổ biến để sử dụng, với tính chất tương tự nhau nên nhiều người phân vân không biết nên sử dụng ID hay Class.

Để giải quyết vấn đề này, trước hết bạn cần phải biết rằng Class có thể sử dụng cho nhiều phần tử khác nhau trên cùng một trang, còn ID chỉ có thể dùng cho một phần tử trên cùng một trang.

Như vậy, bạn nên sử dụng Class cho các phần tử có tính chất lặp lại nhiều lần và dùng ID cho các phần tử sử dụng một lần duy nhất.

Tuy nhiên nếu bạn sợ rối, hãy ưu tiên sử dụng Class cho toàn bộ.

Đặt tên vùng chọn tối ưu

Một trong những lỗi nghiêm trọng dễ mắc phải mà bạn cần tránh, đó là hãy đặt tên vùng chọn có khoá học.

Ví dụ có nhiều bạn đặt tên thế này:

• .titlepost
• .content-post
• ...

Như vậy bạn sẽ thấy khá rối nếu như sau này nhìn lại CSS do chính mình viết. Thay vì vậy, bạn nên đặt tên theo dạng này:

• .post
• .post-title
• .post-content
• .post-meta
• .article
• .article-wrapper
• .article-content
• .header
• .header-menu
• .header-ads

Và khi viết CSS bằng SASS hoặc LESS thì nên viết theo dạng này:

.post{&-title{}&-content{}&-meta{}}

Hy vọng với các chia sẻ trên, các bạn sẽ thấy hứng thú hơn với công việc lên giao diện cho website bằng CSS vốn “dễ mà khó” này nhé!