Cách tốt nhất để bao gồm CSS? Tại sao nên sử dụng @import?

Về cơ bản, tôi tự hỏi lợi thế / mục đích của việc sử dụng @importđể nhập biểu định kiểu vào biểu định kiểu hiện có so với việc chỉ thêm một ...

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

để người đứng đầu tài liệu?

Từ quan điểm tốc độ trang, @importtừ một tệp CSS hầu như không bao giờ được sử dụng, vì nó có thể ngăn các bảng định kiểu được tải xuống đồng thời. Chẳng hạn, nếu biểu định kiểu A chứa văn bản:

@import url("stylesheetB.css");

sau đó việc tải xuống biểu định kiểu thứ hai có thể không bắt đầu cho đến khi bản định kiểu đầu tiên được tải xuống. Mặt khác, nếu cả hai bảng định kiểu được tham chiếu trong <link>các phần tử trong trang HTML chính, cả hai có thể được tải xuống cùng một lúc. Nếu cả hai bảng định kiểu luôn được tải cùng nhau, việc kết hợp chúng thành một tệp duy nhất cũng có thể hữu ích.

Đôi khi có những tình huống @importphù hợp, nhưng chúng thường là ngoại lệ, không phải là quy tắc.

Tôi sẽ chơi trò bênh vực của quỷ, vì tôi ghét nó khi mọi người đồng ý quá nhiều.

1. Nếu bạn cần một biểu định kiểu phụ thuộc vào biểu định kiểu khác, hãy sử dụng @import. Thực hiện tối ưu hóa trong một bước riêng biệt.

Có hai biến bạn tối ưu hóa tại bất kỳ thời điểm nào - hiệu suất mã của bạn và hiệu suất của nhà phát triển . Trong nhiều trường hợp, nếu không phải là đa số các trường hợp, điều quan trọng hơn là làm cho nhà phát triển hiệu quả hơn và chỉ sau đó làm cho mã hiệu quả hơn .

Nếu bạn có một biểu định kiểu phụ thuộc vào biểu định kiểu khác, điều hợp lý nhất phải làm là đặt chúng vào hai tệp riêng biệt và sử dụng @import. Điều đó sẽ có ý nghĩa hợp lý nhất cho người tiếp theo nhìn vào mã.

(Theo tôi, khi nào thì sự phụ thuộc như vậy xảy ra? Nó khá hiếm, theo ý kiến ​​của tôi - thường thì một biểu định kiểu là đủ. Tuy nhiên, có một số vị trí hợp lý để đặt mọi thứ vào các tệp CSS khác nhau :)

• Chủ đề: Nếu bạn có các bảng màu hoặc chủ đề khác nhau cho cùng một trang, họ có thể chia sẻ một số, nhưng không phải tất cả các thành phần.
• Các thành phần con: Một ví dụ giả định - giả sử bạn có một trang nhà hàng bao gồm một menu. Nếu menu rất khác so với phần còn lại của trang, sẽ dễ duy trì hơn nếu nó nằm trong tệp riêng của nó.

Thông thường các bảng định kiểu là độc lập, do đó, việc sử dụng tất cả chúng là hợp lý <link href>. Tuy nhiên, nếu chúng là một hệ thống phân cấp phụ thuộc, bạn nên làm điều có ý nghĩa hợp lý nhất để làm.

Python sử dụng nhập khẩu; C sử dụng bao gồm; JavaScript đã yêu cầu. CSS đã nhập; Khi bạn cần, sử dụng nó!

2. Khi bạn đến điểm mà trang web cần mở rộng, hãy ghép tất cả CSS.

Nhiều yêu cầu CSS dưới bất kỳ hình thức nào - cho dù thông qua liên kết hoặc thông qua @imports - là những thực tiễn tồi đối với các trang web hiệu suất cao. Khi bạn đang ở thời điểm tối ưu hóa, tất cả CSS của bạn sẽ được chuyển qua một công cụ khai thác. Cssmin kết hợp báo cáo nhập khẩu; như @Brandon chỉ ra, grunt cũng có nhiều lựa chọn để làm như vậy. ( Xem thêm câu hỏi này ).

Khi bạn đang ở giai đoạn rút gọn, <link>sẽ nhanh hơn, như mọi người đã chỉ ra, do đó, hầu hết liên kết đến một vài biểu định kiểu và không @import bất kỳ nếu có thể.

Trước khi trang web đạt quy mô sản xuất, điều quan trọng hơn là mã được tổ chức và hợp lý, hơn là nó đi nhanh hơn một chút.

Tốt nhất là KHÔNG sử dụng @importđể đưa CSS vào một trang vì lý do tốc độ. Xem bài viết tuyệt vời này để tìm hiểu lý do tại sao không: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Ngoài ra, thường khó hơn để thu nhỏ và kết hợp các tệp css được cung cấp qua thẻ @import, vì các tập lệnh rút gọn không thể "bóc tách" các dòng @import từ các tệp css khác. Khi bạn bao gồm chúng dưới dạng <thẻ liên kết, bạn có thể sử dụng các mô-đun php / dotnet / java hiện có để thu nhỏ.

Vì vậy: sử dụng <link />thay vì @import.

bằng cách sử dụng phương thức liên kết, các bảng định kiểu được tải song song (nhanh hơn và tốt hơn) và gần như tất cả các trình duyệt hỗ trợ liên kết

nhập tải bất kỳ tệp css bổ sung từng cái một (chậm hơn) và có thể cung cấp cho bạn Flash Of Unstyled Content

@Nebo Iznad Mišo Grgur

Sau đây là tất cả các cách chính xác để sử dụng @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

nguồn: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Không có nhiều sự khác biệt trong việc thêm biểu định kiểu css vào đầu so với sử dụng chức năng nhập. Việc sử dụng @importthường được sử dụng cho các chuỗi kiểu để có thể dễ dàng mở rộng. Nó có thể được sử dụng để dễ dàng trao đổi các bố cục màu khác nhau, ví dụ kết hợp với một số định nghĩa css chung. Tôi muốn nói rằng lợi thế / mục đích chính là khả năng mở rộng.

Tôi đồng ý với nhận xét xbonez cũng như tính di động và khả năng bảo trì được thêm lợi ích.

Chúng rất giống nhau. Một số người có thể lập luận rằng @import dễ bảo trì hơn. Tuy nhiên, mỗi @import sẽ trả cho bạn một yêu cầu HTTP mới theo cách tương tự như sử dụng phương thức "liên kết". Vì vậy, trong bối cảnh tốc độ, nó không nhanh hơn. Và như "duskwuff" đã nói, nó không tải đồng thời là một sự sụp đổ.

Một nơi tôi sử dụng @import là khi tôi đang thực hiện hai phiên bản của một trang, tiếng Anh và tiếng Pháp. Tôi sẽ xây dựng trang của mình bằng tiếng Anh, sử dụng main.css. Khi tôi xây dựng phiên bản tiếng Pháp, tôi sẽ liên kết với biểu định kiểu Pháp (main_fr.css). Ở đầu biểu định kiểu Pháp, tôi sẽ nhập main.css và sau đó xác định lại các quy tắc cụ thể cho các phần tôi cần khác nhau trong phiên bản tiếng Pháp.

Được trích dẫn từ http://webdesign.about.com/od/beginningcss/f/css_import_link.htmlm

Mục đích chính của phương pháp @import là sử dụng nhiều biểu định kiểu trên một trang, nhưng chỉ có một liên kết trong <head> của bạn. Ví dụ: một công ty có thể có một biểu định kiểu toàn cầu cho mọi trang trên trang web, với các phần phụ có các kiểu bổ sung chỉ áp dụng cho phần phụ đó. Bằng cách liên kết với biểu định kiểu phần phụ và nhập các kiểu toàn cục ở đầu biểu định kiểu đó, bạn không phải duy trì biểu định kiểu khổng lồ với tất cả các kiểu cho trang web và mọi phần phụ. Yêu cầu duy nhất là bất kỳ quy tắc @import nào cũng cần phải đến trước các quy tắc phong cách còn lại của bạn. Và hãy nhớ rằng sự kế thừa vẫn có thể là một vấn đề.

Đôi khi bạn phải sử dụng @import trái ngược với nội tuyến. Nếu bạn đang làm việc trên một ứng dụng phức tạp có 32 tệp css trở lên và bạn phải hỗ trợ IE9 thì không có lựa chọn nào khác. IE9 bỏ qua bất kỳ tệp css nào sau 31 đầu tiên và điều này bao gồm và css nội tuyến. Tuy nhiên, mỗi tờ có thể nhập 31 tờ khác.

Có nhiều lý do TỐT để sử dụng @import.

Một lý do mạnh mẽ để sử dụng @import là thiết kế trình duyệt chéo. Nhìn chung, các trang được nhập bị ẩn khỏi nhiều trình duyệt cũ hơn, cho phép bạn áp dụng định dạng cụ thể cho các trình duyệt rất cũ như Netscape 4 hoặc cũ hơn, Internet Explorer 5.2 cho Mac, Opera 6 trở lên và IE 3 và 4 cho PC.

Để làm điều này, trong tệp base.css của bạn, bạn có thể có những điều sau đây:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

Trong trang tùy chỉnh đã nhập của bạn (mớibrowsers.css) chỉ cần áp dụng kiểu xếp tầng mới hơn:

html body {
  font-size:1em;
}

Sử dụng các đơn vị "em" vượt trội hơn các đơn vị "px" vì nó cho phép cả phông chữ và thiết kế trải dài dựa trên cài đặt của người dùng, khi các trình duyệt cũ làm tốt hơn với dựa trên pixel (cứng nhắc và không thể thay đổi trong cài đặt người dùng trình duyệt) . Hầu hết các trình duyệt cũ hơn sẽ không nhìn thấy bảng đã nhập.

Bạn có thể như vậy, ai quan tâm! Hãy thử đến một số hệ thống chính phủ hoặc doanh nghiệp cổ xưa lớn hơn và bạn sẽ vẫn thấy những trình duyệt cũ hơn được sử dụng. Nhưng nó thực sự chỉ là thiết kế tốt, bởi vì trình duyệt bạn yêu thích ngày nay cũng sẽ bị lỗi thời và lỗi thời. Và sử dụng CSS theo cách hạn chế có nghĩa là bạn hiện có một nhóm tác nhân người dùng lớn hơn và đang phát triển không hoạt động tốt với trang web của bạn.

Sử dụng @import khả năng tương thích trang web trình duyệt chéo của bạn giờ sẽ đạt đến mức bão hòa 99,9% chỉ vì rất nhiều trình duyệt cũ hơn không đọc được các trang đã nhập. Nó đảm bảo bạn áp dụng một bộ phông chữ đơn giản cơ bản cho html của họ, nhưng CSS nâng cao hơn được sử dụng bởi các tác nhân mới hơn. Điều này cho phép nội dung có thể truy cập được cho các tác nhân cũ mà không ảnh hưởng đến màn hình trực quan phong phú cần thiết trong các trình duyệt máy tính để bàn mới hơn.

Hãy nhớ rằng, các trình duyệt hiện đại lưu trữ các cấu trúc HTML và CSS cực kỳ tốt sau lần gọi đầu tiên đến một trang web. Nhiều cuộc gọi đến máy chủ không phải là nút cổ chai như trước đây.

Megabyte và megabyte API Javascript và JSON được tải lên các thiết bị thông minh và đánh dấu HTML được thiết kế kém, không nhất quán giữa các trang là trình điều khiển chính của kết xuất chậm hiện nay. Trang tin tức trung bình của Google là hơn 6 megabyte ECMAScript chỉ để hiển thị một chút văn bản! cười lớn

Một vài kilobyte CSS được lưu trong bộ nhớ cache và HTML sạch nhất quán có dấu chân javascript nhỏ hơn sẽ hiển thị tác nhân người dùng với tốc độ cực nhanh chỉ vì trình duyệt lưu trữ cả đánh dấu DOM và CSS nhất quán, trừ khi bạn chọn thao tác và thay đổi điều đó thông qua các thủ thuật xiếc javascript.

Tôi nghĩ rằng chìa khóa trong đây là hai lý do tại sao bạn thực sự viết nhiều biểu định kiểu CSS.

1. Bạn viết nhiều trang vì các trang khác nhau của trang web của bạn yêu cầu các định nghĩa CSS khác nhau. Hoặc ít nhất không phải tất cả chúng đều yêu cầu tất cả các định nghĩa CSS mà một trang khác yêu cầu. Vì vậy, bạn chia nhỏ các tệp CSS để tối ưu hóa những trang nào được tải trên các trang khác nhau và tránh tải quá nhiều định nghĩa CSS.
2. Lý do thứ hai xuất hiện là CSS của bạn ngày càng lớn đến mức trở nên vụng về và để giúp duy trì tệp CSS lớn mà bạn chia chúng thành nhiều tệp CSS dễ dàng hơn.

Vì lý do đầu tiên, <link>thẻ bổ sung sẽ được áp dụng vì điều này cho phép bạn tải các tập tin CSS khác nhau cho các trang khác nhau.

Vì lý do thứ hai, @importcâu lệnh xuất hiện là tiện dụng nhất vì bạn nhận được nhiều tệp CSS nhưng các tệp được tải luôn giống nhau.

Từ quan điểm của thời gian tải không có khác nhau. Trình duyệt phải kiểm tra và tải xuống các tệp CSS tách biệt cho dù chúng được triển khai như thế nào.

Sử dụng @import trong CSS của bạn nếu bạn đang sử dụng CSS RESET, như Đặt lại CSS v2.0 của Eric Meyer, do đó, nó hoạt động trước khi áp dụng CSS của bạn, do đó ngăn ngừa xung đột.

Tôi nghĩ rằng @import hữu ích nhất khi viết mã cho nhiều thiết bị. Bao gồm một câu lệnh có điều kiện để chỉ bao gồm kiểu cho thiết bị được đề cập, sau đó chỉ có một tờ được tải. Bạn vẫn có thể sử dụng thẻ liên kết để thêm bất kỳ thành phần kiểu phổ biến nào.

Tôi đã trải nghiệm "đỉnh cao" của các bảng định kiểu được liên kết mà bạn có thể thêm. Mặc dù việc thêm bất kỳ số lượng Javascript được liên kết nào không phải là vấn đề đối với nhà cung cấp máy chủ miễn phí của tôi, sau khi nhân đôi số lượng bảng định kiểu bên ngoài, tôi đã gặp sự cố / chậm. Và ví dụ mã đúng là:

@import 'stylesheetB.css';

Vì vậy, tôi thấy nó hữu ích khi có một bản đồ tinh thần tốt, như Nitram đã đề cập, trong khi vẫn khó mã hóa thiết kế. Thần tốc. Và tôi xin lỗi vì những lỗi ngữ pháp tiếng Anh, nếu có.

Hầu như không có lý do để sử dụng @import vì nó tải từng tệp CSS được nhập riêng biệt và có thể làm chậm đáng kể trang web của bạn. Nếu bạn quan tâm đến cách tối ưu để xử lý CSS (khi nói đến tốc độ trang), đây là cách bạn nên xử lý với tất cả mã CSS của mình:

• Mở tất cả các tệp CSS của bạn và sao chép mã của từng tệp
• Dán tất cả mã vào giữa một thẻ STYLE trong tiêu đề HTML của trang của bạn
• Không bao giờ sử dụng CSS @import hoặc các tệp CSS riêng biệt để phân phối CSS trừ khi bạn có số lượng mã lớn hoặc có nhu cầu cụ thể.

Thông tin chi tiết tại đây: http://www.giftofspeed.com/optizes-css-delivery/

Lý do ở trên hoạt động tốt nhất là vì nó tạo ra ít yêu cầu hơn để trình duyệt xử lý và nó có thể ngay lập tức bắt đầu hiển thị CSS thay vì tải xuống các tệp riêng biệt.

Điều này có thể giúp một nhà phát triển PHP. Các chức năng dưới đây sẽ loại bỏ khoảng trắng, xóa nhận xét và ghép tất cả các tệp CSS của bạn. Sau đó chèn nó vào một <style>thẻ trong đầu trước khi tải trang.

Hàm bên dưới sẽ loại bỏ các bình luận và thu nhỏ thông qua trong css. Nó được ghép nối với chức năng tiếp theo.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Bạn sẽ gọi chức năng này trong phần đầu của tài liệu của bạn.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

Bao gồm các chức năng concatenateCSS() trong đầu tài liệu của bạn. Truyền vào một mảng với tên của các bảng định kiểu của bạn với đường dẫn IE : css/styles.css. Bạn không cần phải thêm tiện ích mở rộng .cssvì nó được thêm tự động vào chức năng trên.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>