[Cần giúp đỡ] Tối ưu hóa code CSS

Code Css của mình dạng như thế này có cách nào thu gọn code được không ạ ?

Mã:

.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
    width:40px; height:37px; background-position: -44px -43px
}
 
.node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
    width:40px; height:37px; background-position: -44px -43px
}
 
.node.node_3 .forumNodeInfo .nodeIcon, .node.node_3 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
width:36px; height:38px; background-position: -131px -2px
}
 
.node.node_3 .forumNodeInfo.unread .nodeIcon, .node.node_3 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
width:36px; height:38px; background-position: -131px -2px
 
.node.node_4 .forumNodeInfo .nodeIcon, .node.node_4 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
width:36px; height:38px; background-position: -131px -2px
}
 
.node.node_4 .forumNodeInfo.unread .nodeIcon, .node.node_4 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/iconnode.png");
width:36px; height:38px; background-position: -131px -2px

Ví dụ như :

Mã:

.icon {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(@imagePath/xenforo/iconnode.png);}
 
[B].2 {width:37px; height:39px; background-position: -80px -162px}[/B]
[B].3 {width:39px; height:39px; background-position: -169px -84px}[/B]

.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/iconnode.png");
width:40px; height:37px; background-position: -44px -43px
}

.node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/iconnode.png");
width:40px; height:37px; background-position: -44px -43px
}
những chỗ in đỏ thay = biến và biến thì lấy giá trị dòng in đậm.
Ai rành về CSS giúp với

 

test post

 

CSS thuần không phải một ngôn ngữ lập trình nên điều bạn yêu cầu không thể thực hiện. Tuy nhiên có 1 kỹ thuật gọi là css-preprocessor. Mình đọc không hiểu lắm, bạn có thể đọc kỹ tại đây: http://vozforums.com/showpost.php?p=48255980&postcount=16
Nhưng mình nghĩ áp dụng vào xenforo không đơn giản và không cần thiết vì hiệu quả quá nhỏ so với công sức bỏ ra

 

Xin lỗi! Mình vừa đọc kỹ lại bài viết kia, nó không liên quan lắm đến phần bạn nói. Tóm lại CSS không phải ngôn ngữ lập trình nên không thể giúp bạn được. Nếu bạn muốn rút gọn đơn thuần kiểu css thì có thể GG ra rất nhiều (gom các thuộc tính của cùng 1 id, class).

 

.node.node_2 .forumNodeInfo.unread thì số 2 ở đây mang ý nghĩa tên của Class
Còn phần in đậm thì là thuộc tính của Class
Bạn định hỏi gì vậy?

Mã:

<xen:set var="$bien1">
.2 {width:37px; height:39px; background-position: -80px -162px}
</xen:set>
 
<xen:set var="$bien2">
.3 {width:39px; height:39px; background-position: -169px -84px}
</xen:set>

Khi nào muốn dùng cái đoạn .2 {width:37px; height:39px; background-position: -80px -162px}
Thì chỉ cần {$bien1}

 

Khi ta cho {$bien1} vào các temp css thì nó vẫn có tác dụng sao. Không thể tin được

 

Sao cậu không làm thử mà lại :O thế. Viết theo vị trí của một của mod chút đi chứ.

 

Thật sự mình không biết điều đó. Mình chỉ kiểm soát các lỗi đơn thuần của xf thôi, không đi sâu. Làm luận văn xong sẽ nghiên cứu sâu hơn nếu có điều kiện. Xem ra trước giờ mình quá xem thường xf rồi _ _!!

 

Chảm nhau.......