Вопрос по css, html – Лучший способ включить CSS? Зачем использовать @import?

253

В основном мне интересно, каково преимущество / цель использования@import импортировать таблицы стилей в существующую таблицу стилей вместо простого добавления другой ...

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

в голову документа?

Error: User Rate Limit Exceeded xbonez
Error: User Rate Limit Exceeded duskwuff
Error: User Rate Limit Exceeded mddw
Error: User Rate Limit Exceededvoid elementError: User Rate Limit ExceededHTML5Error: User Rate Limit Exceeded<link rel="stylesheet" type="text/css" href="theme.css">. Константин Ван

Ваш Ответ

17   ответов
3

2

11

6

@import

160

1. If you need a stylesheet that depends on another one, use @import. Do the optimization in a separate step.

performance of the developermake the developer more efficient, and only then make the code more performant.

dependsThat will make the most logical sense to the next person who looks at the code.

(When would such a dependency happen? It's pretty rare, in my opinion - usually one stylesheet is enough. However, there are some logical places to put things in different CSS files:)

Theming: If you have different color schemes or themes for the same page, they may share some, but not all components. Subcomponents: A contrived example - say you have a restaurant page that includes a menu. If the menu is very different from the rest of the page, it'll be easier to maintain if it's in its own file.

<link href>

Python uses import; C uses include; JavaScript has require. CSS has import; when you need it, use it!

2. Once you get to the point where the site needs to scale, concatenate all the CSS.

any).

<link>

Before the site reaches production scale though, it's more important that the code is organized and logical, than that it goes slightly faster.

Error: User Rate Limit Exceeded
-2

all

Open all your CSS files and copy the code of every single file Paste all the code in between a single STYLE tag in the HTML header of your page Never use CSS @import or separate CSS files to deliver CSS unless you have a large amount of code or there is a specific need to.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded<HEAD>
Error: User Rate Limit ExceededthinkError: User Rate Limit ExceededcodeError: User Rate Limit Exceeded
3

2

8

@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);

3

3

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

html body {
  font-size:1em;
}

-2

<style>

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

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

concatenateCSS()css/styles.css.css

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededfile_get_contents()Error: User Rate Limit Exceeded
2

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

<link>

@import

Error: User Rate Limit Exceeded
0

Error: User Rate Limit Exceeded

@import 'stylesheetB.css';

Error: User Rate Limit Exceeded

3

The main purpose of @import method is to use multiple style sheets on a page, but only one link in your < head >. For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.

305

@import

@import url("stylesheetB.css");

<link>

@import

Error: User Rate Limit Exceeded@importError: User Rate Limit Exceededgrunt-concat-cssError: User Rate Limit Exceeded@importError: User Rate Limit Exceeded@importError: User Rate Limit Exceededgrunt-browserify.
Error: User Rate Limit Exceeded@importError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded@importError: User Rate Limit Exceeded@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);Error: User Rate Limit ExceededlinkError: User Rate Limit Exceeded
There are occasionally situations where @import is appropriateError: User Rate Limit Exceeded@mediaError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded@importError: User Rate Limit Exceeded<link>Error: User Rate Limit Exceeded
14

@import

<link />@import.

Error: User Rate Limit Exceeded

Похожие вопросы