Chia cột trong CSS nhanh gọn lẹ với Semantic.gs [NEW]

Chia cột trong CSS nhanh gọn lẹ với Semantic.gs [NEW]

Như vậy, loạt bài về lập trình theme WordPress của tôi cũng đã gần đến bước khởi đầu khá quan trọng, đó là viết CSS cho giao diện. Thực ra theo kinh nghiệm của mình thì chia cột cho website trong CSS là bước mình thấy nhàm chán nhất vì chúng ta phải thực hiện lặp đi lặp lại một thao tác với nhiều đoạn CSS giống nhau.

Chính vì vậy, mình chuyển sang dùng CSS Grid Systems cách đây khá lâu để giảm bớt bước này, vừa nhanh, vừa tiện, vừa tối ưu, đỡ phải mắc các lỗi linh tinh.

Nếu bạn là người lần đầu tiên nghe về Hệ thống lưới CSS, bạn có thể tham khảo bài viết Tổng quan về 960Grid để hiểu những gì các hệ thống lưới này phải làm.

Nhằm giúp mọi người thao tác nhanh hơn và giảm bớt mệt mỏi trong việc bố trí website bằng CSS, trong loạt bài Lập trình WordPress Theme, mình sẽ được hướng dẫn bằng hệ thống lưới có tên là Semantic Grid (Semantic.gs). Bài viết này được coi là phần hướng dẫn Ngữ nghĩa cơ bản để các bạn nắm bắt và áp dụng trong phần 5 của loạt bài còn lại.

Giới thiệu Lưới ngữ nghĩa

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

Semantic.gs hỗ trợ cả LESS và SASS và Stylus

Tôi đề cập đến LESS trong bài viết này vì cách sử dụng đơn giản, không cần thông qua các lệnh Ruby như SASS.

Nếu bạn là người mới làm quen với CSS, có thể sẽ hơi khó hiểu với LESS vì bạn có thể chưa quen với nó, nhưng tôi cũng không bao giờ muốn làm mọi thứ phức tạp hơn, nhưng tôi cố tình đưa LESS vào đây là có lý do.

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

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

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

Tách các cột CSS bằng Ngữ nghĩa

Sau đó, tôi sẽ viết CSS với 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 khác bạn có thể đã hiểu, ở đây chúng tôi quan tâm đến đoạn .cột(). Đoạn này có nghĩa là nó sẽ cho phép lớp được chọn kế thừa thuộc tính chia cột với tham số là 6. Vì trong Semantic hỗ trợ các tham số từ 1 đến 12 thể hiện số cột trong hệ thống lưới. Khi chạy trong trình duyệt, nó sẽ xuất ra kết quả sau:

Kết quả phân chia cột theo ngữ nghĩa

Và đây là đoạn mã CSS mà LESS xuất ra, hãy xem và 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;
}

Ok, nếu bạn đặt câu hỏi, làm thế nào để xóa CSS khi chúng ta thả nổi nhiều phần tử trên trang web? Ok, tôi đã thử một ví dụ mới như thế này.

Chia các cột giao diện phức tạp bằng cách sử dụng Ngữ nghĩa

Sau đó, tôi sẽ có một đoạn CSS như sau được viết bằng LESS để chia các 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;
}
}
}

Được rồi, đây là những gì chúng tôi có …

Tách các cột phức tạp bằng cách sử dụng Ngữ nghĩa và LESS

Quá đẹp cho đội bán dép: *. Đoạn mã CSS của đoạn trên là đây, nếu nhìn kỹ, bạn sẽ hiểu được ý nghĩa của hệ thống lưới Ngữ nghĩa.

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;
}

Do đó, chúng ta có thể kết luận ngắn gọn quy tắc sử dụng lưới của Semantic.gs như sau:

  1. Viết .cột(N) vào lớp mà chúng ta muốn tách 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 được chia nhỏ, hãy viết thêm .hàng ngang(N) Để đặt hàng cho nó, n cũng là một số tự nhiên từ 1 đến 12. Sau đó, các vùng con bên trong nó sẽ phải được khai báo. .cột(n, n của hàng) để tách cột (ví dụ 2).

Bạn đã hiểu chưa? Nếu vẫn chưa hiểu các bạn vui lòng truy cập trang chủ http://semantic.gs/ để xem hướng dẫn chi tiết hơn vì trên trang chủ có hướng dẫn rất dễ xem.

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

Nếu bạn có bất kỳ thắc mắc nào về Semantic.gs cần được giải đáp, hãy comment bên dưới.

5/5 – (1 phiếu bầu)