Hướng dẫn Hướng dẫn cách chia cột trong CSS tối ưu với Semantic.gs

[PVS]

Hướng dẫn cách chia cột trong CSS tối ưu với Semantic.gs

Thực tế dựa theo kinh nghiệm đã trải qua của mình, thì phần chia cột cho website trong CSS là bước mình thấy buồn nhạt nhất vì chúng ta phải làm đi làm lại một động tác với nhiều đoạn CSS na ná nhau.

Chính vì lẽ đó, mình đã chuyển qua dùng các CSS Grid System từ lâu nhằm giảm bớt khâu này, vừa nhanh tiện lợi mà lại vừa tối ưu, đỡ phải gặp lỗi linh tinh.

Nếu bạn là người lần đầu tiên nghe đến CSS Grid System thì có thể tham khảo bài Tổng quan 960Grid để hiểu nhiệm vụ các các grid system này là gì.

Để giúp mọi người làm nhanh hơn và đỡ phải mệt mỏi trong việc dàn trang website bằng CSS nên trong serie Lập trình theme WordPress sẽ được mình hướng dẫn bằng một grid system với tên gọi là Semantic Grid (Semantic.gs). Bài này được xem là bài hướng dẫn Semantic cơ bản để bạn có thể nắm bắt và ứng dụng trong phần 5 của serie kia.

Giới thiệu Semantic Grid
Semantic.gs là một grid system dựa trên cấu trúc của 960Grid – một grid system quá nổi tiếng và lâu đời. Sở dĩ trong serie này mình chọn dùng Semantic.gs thay cho 960.gs là vì nó hỗ trợ riêng cho LESS, SASS và hỗ trợ Responsive rất chuẩn, cách sử dụng lại đơn giản.

Semantic.gs hỗ trợ cả LESS lẫn SASS và Stylus
Mình đề cập đến LESS trong bài này vì cách sử dụng đơn giản, không cần thông qua lệnh Ruby như SASS.

Nếu những ai mới tìm hiểu CSS thì có thể hơi rối với LESS vì có thể chưa quen, nhưng mình cũng không bao giờ muốn mọi việc trở nên phức tạp hơn mà mình cố tình mang LESS vào đây cũng có nguyên do.

Thứ nhất, nếu bạn sử dụng grid system bằng LESS thì công đoạn chia cột trong CSS sẽ đơn giản và nhanh hơn nhiều. Vì khi làm việc với một grid system hay một CSS Framework bất kỳ, bạn sẽ biết rằng chúng ta sẽ cần chèn các class riêng của nó vào giao diện HTML. Điều này sẽ không tốt chút nào với các cấu trúc website phức tạp vì nhìn đâu cũng ra class của framework, và đó cũng là lý do nhiều người quay lưng với CSS Framework.

Còn nếu bạn sử dụng LESS hay SASS thì công việc này đơn giản hơn, không cần thêm class linh tinh vào HTML mà chỉ cần viết CSS bằng phương pháp kế thừa (extend) các thuộc tính có sẵn trong các CSS Processor (ám chỉ LESS, SASS,…) là xong.

Để dễ hiểu, mình có thể minh chứng thêm bằng ví dụ nhỏ dưới đây. Bây giờ mình có một thẻ đoạn HTML như sau:

​

Sau đó mình sẽ viết CSS bằng LESS như thế này:

.right {
 .column(6);
 background: green;
 padding: 25px;
 color: #fff;
}
.left {
 .column(6);
 background: red;
 padding: 25px;
 color: #fff;
}

Các thuộc tính bình thường kia chắc bạn cũng hiểu rồi, ở đây chúng ta quan tâm đến đoạn .column(). Đoạn này có nghĩa là nó sẽ cho phép class được chọn thừa hưởng thuộc tính chia cột với tham số là 6. Bởi vì trong Semantic hỗ trợ tham số từ 1 đến 12 tượng trưng cho số cột trong grid system. Khi chạy lên trình duyệt thì nó sẽ ra kết quả như sau:

​

Và đây là code CSS mà LESS xuất ra, nhìn phát hiểu ngay:

.right {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: green;
 padding: 25px;
 color: #fff;
}
.left {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: red;
 padding: 25px;
 color: #fff;
}

Oke, nếu bạn đặt ra câu hỏi là nó clear CSS bằng cách nào khi chúng ta float nhiều thành phần trên website? Ok, mình thử một ví dụ mới thế này.

​

Rồi mình sẽ có một đoạn CSS như sau viết bằng LESS để chia cột.

.wrapper {
 width: @total-width; // @total-width là một biến được định sẵn giá trị = 960px
 overflow: hidden;
 margin: 0 auto; // Căn giữa giao diện
 text-align: center;
}
.container {
 .column(12); // Thiết lập tổng 12 cột cho khu vực .container
 
.content {
 .row(12); // .row() sẽ bao gồm các thuộc tính clear CSS và tối ưu để lồng nhiều cột.
 color: #fff;
 
.content-left {
 .column(6,12); // Cho .content-left được hưởng 6/12 cột
 background: green;
 color: #fff;
 }
 
.content-right {
 .column(6,12); // Cho .content-right được hưởng 6/12 cột
 background: red;
 color: #fff;
 }
 }
 .box {
 .row(12); // Thiết lập 12 cột cho khu vực .box
 .box1, .box2, .box3, .box4 {
 .column(3,12); // Cho tất cả box bên trong hưởng 3/12 cột
 background: gray;
 padding: 2.5em 0;
 margin-top: 35px;
 text-align: center;
 }
 }
}

Okay, ta có kết quả trông như thế này nè…

​

Quá đẹp cho đội bán dép luôn . Code CSS của đoạn trên là đây, bạn xem kỹ sẽ hiểu được ý nghĩa của hệ thống grid Semantic.

body {
 width: 100%;
 *zoom: 1;
}
body:before,
body:after {
 content: "";
 display: table;
}
body:after {
 clear: both;
}
.wrapper {
 width: 56.471em;
 overflow: hidden;
 margin: 0 auto;
 text-align: center;
}
.container {
 display: inline;
 float: left;
 width: 55.29452083333333em;
 margin: 0 0.5882395833333333em;
}
.container .content {
 display: block;
 width: 57.647479166666656em;
 margin: 0 -0.5882395833333333em;
 *zoom: 1;
 color: #fff;
}
.container .content:before,
.container .content:after {
 content: "";
 display: table;
}
.container .content:after {
 clear: both;
}
.container .content .content-left {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: green;
 color: #fff;
}
.container .content .content-right {
 display: inline;
 float: left;
 width: 27.05902083333333em;
 margin: 0 0.5882395833333333em;
 background: red;
 color: #fff;
}
.container .box {
 display: block;
 width: 57.647479166666656em;
 margin: 0 -0.5882395833333333em;
 *zoom: 1;
}
.container .box:before,
.container .box:after {
 content: "";
 display: table;
}
.container .box:after {
 clear: both;
}
.container .box .box1,
.container .box .box2,
.container .box .box3,
.container .box .box4 {
 display: inline;
 float: left;
 width: 12.941270833333332em;
 margin: 0 0.5882395833333333em;
 background: gray;
 padding: 2.5em 0;
 margin-top: 35px;
 text-align: center;
}

Như vậy, chúng ta có thể kết luận ngắn gọn về quy tắc sử dụng grid của Semantic.gs là như sau:

1. Viết .column(n) vào class mà chúng ta muốn chia cột, trong đó n là số tự nhiên từ 1 đến 12, tương ứng với số cột. (ví dụ 1)
2. Nếu bạn có một khu vực chứa nhiều hơn một đối tượng cần chia cột thì viết thêm .row(n) để thiết lập hàng cho nó, n cũng là số tự nhiên từ 1 tới 12. Sau đó, các khu vực con bên trong nó sẽ phải khai báo .column(n,n của row) để chia cột (ví dụ 2).

Bạn đã hiểu chưa nào? Nếu vẫn chưa hiểu, mời bạn vào trang chủ http://semantic.gs/ để xem các hướng dẫn chi tiết hơn nhé vì trong đó đã có hướng dẫn ngay trang chủ rất dễ thấy.

Nhìn chung thì Semantic.gs rất đơn giản và dễ sử dụng nên có thể sẽ hợp hơn cho những ai mới tập chia cột hoặc mới tìm hiểu LESS. Nếu bây giờ bạn cũng chưa rành qua LESS thì mình cũng khuyên bạn nên tìm hiểu qua luôn đi vì dùng CSS Processor cũng có nhiều cái rất thú vị, quan trọng là giúp bạn đỡ nhàm chán hơn khi viết CSS.

Chúc các bạn thành công.

Nguồn: thachpham.com​