avoiding @import

  • Resolved johnhewitt1

    (@johnhewitt1)


    13 years, 7 months ago

    Hello,
    I am tweaking my website and i was curious about @import. Google Page speed etc. and other resources mention that @import can slow page loading; this is not a major problem for me but i was curious how you can write a child theme css without using @import to bring in the parent stylesheet?
    using <link> in headers etc, does not work. Perhaps a php function can do it. Can this be done?

    many thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • If you don’t want to use import, simply copy the content of the parent theme css file into your child theme, then add you own css to the end.

    The reason people say @import slows page loading is because it’s an extra resource to load for each page view. Having only one @import won’t have too much of an impact on page load times.

    Thread Starter johnhewitt1

    (@johnhewitt1)

    I never thought of that! ??

    So If my own css rules are below the parent css, am I right that my changed css will still override the same css rule of the parent above it?

    Thanks again

    Yes, providing the rules that come before it don’t have !important in them. But you can still override them by using !important yourself.

    Thread Starter johnhewitt1

    (@johnhewitt1)

    Thank you for the excellent advice,

    I shall experiment,

    Thanks again

    Thread Starter johnhewitt1

    (@johnhewitt1)

    As an update, !important worked beautifully. For it to work completely, I placed my css above the parent and added !important to my own rules.

    Now, I no longer need @import and everything is in one sheet.

    Thanks again ??

    You’re welcome =)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘avoiding @import’ is closed to new replies.