is this css efficent?

  • Resolved dsj1972

    (@dsj1972)


    5 years, 2 months ago

    HI,

    I have changed the text colour of each page this way

    body.page-id-1657 .site-content {background-color: #000; color: #7FFF00;}

    body.page-id-199 .site-content {background-color: #000; color: #7FFF00;}

    body.page-id-1657 .site-content {background-color: #000; color: #7FFF00;}

    body.page-id-181 .site-content {background-color: #000; color: #7FFF00;}

    body.page-id-201 .site-content {background-color: #000; color: #7FFF00;}

    This is so that every page has the same text and background

    Doesnt look that elegant to me

    Is there somehow I can change the above and just choose ALL PAGES ?

    Many thanks,

    David.

    The page I need help with: [log in to see the link]

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

  • Hi David,

    to find out if the CSS is efficient, first you’d have to see if it’s doing anything. As far as I can tell, it doesn’t make any changes to the page.

    Then, let’s say it does do what it’s supposed to do:

    There are several optimization steps.

    First, repeating selectors can be set in one rule:

    body.page-id-1657 .site-content,
body.page-id-199 .site-content,
body.page-id-1657 .site-content,
body.page-id-181 .site-content,
body.page-id-201 .site-content {
    background-color: #000; color: #7FFF00;
}

    Second, if this should apply to all pages, there is no need to include that selector, the css will then apply to all pages:

    body .site-content,
body .site-content,
body .site-content,
body .site-content,
body .site-content {
    background-color: #000; color: #7FFF00;
}

    Third, so that leaves 5 identical selectors, so you could also write:

    body .site-content {
    background-color: #000; color: #7FFF00;
}

    Fourth, since every tag is a child of the <body> tag, it can be omitted:

    .site-content {
    background-color: #000; color: #7FFF00;
}

    But, since you’ve also set the background-color on the body tag, the property background-color does not need to be repeated, which leaves:

    .site-content {
    color: #7FFF00;
}
    • This reply was modified 5 years, 2 months ago by ronaldvw.
    Thread Starter dsj1972

    (@dsj1972)

    Hi Ronald

    Thanks for that. The code I pasted does make a change – it turns text green.

    I’m glad to say that your much more condensed code does the same job so many thanks I really appreciate you time and help.

    David.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘is this css efficent?’ is closed to new replies.