发表新帖
发表新帖

Comparison of loading CSS inline, embedded and from external files

前端 未结
关注
10 1074
后悔当初
后悔当初 2020-12-03 18:21

We can write CSS as the following types:

  1. Inline CSS
  2. Embedded CSS
  3. External CSS

I would like to know pros and cons of each.

相关标签:
10条回答
  • 温柔的废话
    2020-12-03 18:39

    You want external css. It's the easiest to maintain, external css also simplifies caching. Embedded means that each separate html file will need to have it's own css, meaning bigger file size and lots of headaches when changing the css. Inline css is even harder to maintain.

    External css is the way to go.

    0 讨论(0)
  • 北恋
    2020-12-03 18:40

    If you are using a server side language, why not embed CSS and use conditional programming to display it as necessary? For example, say you're using PHP w/ Wordpress and you want some homepage specific CSS; you could use the is_home() function to show your CSS in the head of the document for that page only. Personally, I have my own template system that works like so:

    inc.header.php = all the header stuff, and where page specific CSS would go I put:

    if(isset($CSS)) echo $CSS;

    Then, in a specific page template (say about.php), I would use a heredoc variable for the page specific CSS, above the line which includes the header:

    Contents of about.php:

    <?php

$CSS = <<< CSS

.about-us-photo-box{
/* CSS code */
}

.about-us-something-else{
/* more CSS code */
}
CSS;

include "inc.header.php"; // this file includes if(isset($CSS)) echo $CSS; where page-specific CSS would go ...

<body>

<!-- about us html -->

include "inc.footer.php";

?>

    Is there something I'm missing that makes this approach inferior?

    Pros:

    1) I can still cache the page using standard caching techniques (is there a caching method that takes advantage of a CSS only external file??).

    2) I can use php for special case conditional formatting in specific class declarations if absolutely necessary (PHP doesn't work in a CSS file, unless I'm missing some server directive I could set).

    3) All my page specific CSS is extremely well organized in the actual PHP file in which it's being used.

    4) It cuts down on HTTP requests to external files.

    5) It cuts down on server requests to external files.

    Cons:

    1) My IDE program (Komodo IDE) can't follow the Heredoc formatting to properly highlight the CSS, which makes it slightly harder to debug syntax errors in the CSS.

    2) I really can't see any other con, please enlighten me!

    0 讨论(0)
  • 失恋的感觉
    2020-12-03 18:41

    To everyone in the here and now, reading after 2015, with projects like Polymer, Browserify, Webpack, Babel, and many other important participants that I'm probably missing, we have been ushered into a new era of writing HTML applications, with regards to how we modularize large applications, distribute changes and compose related presentation, markup and behavior into self-contained units. Let's not even get started with service workers.

    So before anyone forms an opinion on what is and isn't feasible, I would recommend that they investigate the current web ecosystem in their time to see if some issues related to maintainability have been gracefully solved.

    0 讨论(0)
  • 刺人心
    2020-12-03 18:42

    Use external CSS when:

    • you have a lot of css code that will make your file messy if you put it all inline
    • you want to maintain a standard look-and-feel across multiple pages

    External CSS makes it a lot easier to manage your CSS and is the accepted way of implementing styles.

    If the styles are only needed for one file, and you don't foresee that ever changing to apply to other pages, you can put your css at the top of the file (embedded?).

    You should generally only use inline CSS if:

    • It's a one-time formatting for a specific tag
    • You want to override the default css (set externally or at the top of the file) for a specific tag
    0 讨论(0)
  • 逝去的感伤
    2020-12-03 18:43

    Inline

    Quick, but very dirty

    This is (sadly) also the only really sane option for HTML formatted email as other forms often get discarded by various email clients.

    Embedded

    Doesn't require an extra HTTP request, but doesn't have the benefits of:

    Linked

    Can be cached, reused between pages, more easily tested with validators.

    0 讨论(0)
  • 忘掉有多难
    2020-12-03 18:47

    Pros:

    Allows you to control the layout of the entire site with one file. Changes affect all documents at the same time. Can eliminate redundant in-line styling (Font, Bold, Color, Images) Provide multiple views of the same content for different types of users.

    Cons:

    Older browsers may not be able to understand CSS. CSS is not supported by every browser equally. In this case, the pros far outweigh the cons. In fact, if the site is designed in a specific way, older browsers will display the content much better (on average) than if the site were managed with tables.

    0 讨论(0)
 看不清?
提交回复
热议问题