CSS @Import Best Practices

CSS @import Best Practices

From pure experience:

While working you can keep everything separated (reset.css, forms.css, main.css, etc.) if you find it hard to work with one single file - I don't do even that..

When putting on production - keep everything in one file - no imports - 1 server request - minimize your css.

Exception is an additional ie.css if you want to keep your main.css hack free/pass validation (I also don't do this since not a single of my clients cared about validation - people want it to work, badges are not a trend :) - so i just use hacks trough my main.css (#, _, etc.))

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

Is using @import declarations a bad practice?

I think you should use LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance.

link

• Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet.

import

• Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet.

The most common reason given for using @import instead is because older browsers didn't recognize @import, so you could hide styles from them.

This link will solve your all queries

What's the Difference Between @import and link for CSS?

Putting @import at the bottom of CSS

Yes. Importing another CSS file from a pseudo-class, which is what I assume you meant by "user interactions", will still impact performance. A significantly faster way to achieve the same result is changing the property values through JavaScript event listeners.

Is it possible to include one CSS file in another?

Yes:

@import url("base.css");

Note:

• The @import rule must precede all other rules (except @charset).
• Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

What are best practices organizing css for the Asset Pipeline in Rails 4

To use your custom variables, @import is the solution.

I don't use Assets Pipeline default require in SASS project. Instead I use @import.

//application.css.scss
@import "my_variables";
@import "bootstrap";
@import "others";

CSS: @import vs. link href=

The difference comes down to parallel downloading. @import blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.

What are your tips for best practice for web application structure?

Should I have one base style sheet for the whole site and one for each individual page for customizations?

Be pragmatic. If you have few enough rules that you can organise them all in one file and retain an oversight of what does what, do that. If you have a significant number of rules that only apply to certain sections or individual pages in your site, by all means break them out into their own sub-stylesheets, but don't feel the need to create a separate stylesheet for every single page even when it only contains two rules. Add a page-specific class or id to <body> so you can pick out single pages from a shared stylesheet should you need to.

The separation of styles into stylesheets is for your benefit as an author, so do what you find easiest to manage. For a complicated site that'll probably be more than one CSS file, but it's not going to be dozens.

Should I have another for print styles?

Generally yes. Whilst you can embed print styles inside another stylesheet using an @media rule, this has traditionally been buggy, so putting the media in the <link> tag is usually easiest. In any case print stylesheets are often so different from their screen counterparts that it just makes sense to keep their rules separate.

I've heard that linking more files takes more time for the browser to retrieve them.

Yes, but this effect is often overstated. HTTP/1.1 reduces the per-request latency by keeping connections between the client and server alive, which is a strong mitigation.

How many is is too many?

Enough that you're extremely unlikely to have that many stylesheets. Scripts can be a problem if you're using the kind of framework that demands one script file per class, but otherwise are generally OK. It's more commonly problematic with lots of small images.

Do you heavily comment your CSS?

Light commenting usually should be enough. CSS's declarative rule style doesn't usually get complicated enough to need the in-depth explanations code can demand. In particular though, document anything counterintuitive like browser-specific hacks.

Alphabetize within elements?

Not unless that makes it easier for you to manage. Usually it wouldn't, you'd try to group similar rules, or rules applying to similar groups of elements.

Do I need a reset?

A full reset? Not if you know what you're doing and can select the particular problematic defaults you want to reset.

Should I include one or two nice libraries (JQuery and Prototype, for example)

Don't include more than one framework unless you absolutely have to.

and then have another included for each page?

If each page has particular custom behaviour you could. But that doesn't usually happen. If you make progressive-enhancement behaviour scripts that bind to eg. class names, you can include the script for each behaviour on each page that uses it, then let it find the elements to bind to automatically.

Directory Structure: How do you organize a site?

Personally, for my Python/WSGI applications:

appfolder
    application.py       - main WSGI entry point and control/configuration script
    data                 - run-time writable application file store
        private          - files not available through the web server
        public           - mounted as a virtual directory on the web server
    logs                 - access, error, application log files
    system               - all the static application code and data
        htdocs           - web server root folder
            file         - static servable files
            img          - static images
            script       - JavaScript
            style        - CSS
        lib              - Python modules used by site
            appmodule    - main application code package
        templates        - HTML page templates
            mail         - mail text templates

It's important for me to keep the ‘data’ in a separate place (with separate permissions) to the application in ‘system’. You need to be able to swap out the ‘system’ folder to upgrade the application, without having to worry that there are uploaded images in htdocs/img you have to worry about keeping.

Best way to have global css in Vuejs

Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.

As comments below suggested if using webpack adding this to main.js works:

import './assets/css/main.css';

---

Related Topics