Ghép nối nhiều tệp CSS thành một

Question

Cách tốt nhất để ghép nhiều tệp CSS vào một tệp CSS là gì?

tôi muốn giảm bớt sau ..

<link href="css/1.css" rel="stylesheet" type="text/css" media="all"> 
<link href="css/2.css" rel="stylesheet" type="text/css" media="all"> 
<link href="css/3.css" rel="stylesheet" type="text/css" media="all"> 

.. vào ..

<link href="css/1-3.css" rel="stylesheet" type="text/css" media="all"> 

Đơn giản chỉ cần làm cat css/*.css > css/1-3.css dường như không làm các trick.

Answer 1

Chừng nào các đặt hàng của các đối số cho cat phù hợp với trật tự ban đầu của ba file CSS tham chiếu trong HTML file cat -method nên làm việc như mong đợi.

Vì vậy, cho nói ..

<link href="css/one.css" rel="stylesheet" type="text/css" media="all"> 
<link href="css/two.css" rel="stylesheet" type="text/css" media="all"> 
<link href="css/three.css" rel="stylesheet" type="text/css" media="all"> 

.. các concaternation sau ..

cat css/one.css css/two.css css/three.css > css/all.css 

.. với nhau sẽ tham chiếu sau ..

<link href="css/all.css" rel="stylesheet" type="text/css" media="all"> 

.. nên 100% giống hệt nhau.

Answer 2

Vào đầu 3.css bạn có thể thêm:

@import url(/css/1.css); 
@import url(/css/2.css); 

Nhưng tôi thích sử dụng nhiều thẻ liên kết, hoặc, thậm chí tốt hơn, nén CSS của tôi vào 1 tập tin (sử dụng YUI compressor ví dụ).

Answer 3

Bạn luôn có thể nhập tệp CSS phụ từ CSS chính được bao gồm trong HTML. Đây là a nice and simple tutorial.

Answer 4

Bạn cũng có thể sử dụng mod_concat hoặc PHP solution để kết hợp các tệp CSS và JS của mình.

FYI, Robert Nyman gần đây đã viết một bài viết về optimizing CSS and JavaScript files.