4
\$\begingroup\$

I just added a new feature to my portfolio: Night Mode. I created it with CSS and session storage in JavaScript. I want you to review my CSS of night files, I feel it's filled with !important and I'm sure this is a bad practice. Can anyone help me make them better?

My second question, the default mode (white mode) runs in the first milliseconds when moving from page to another. I think it's not a good practice. Can anyone help me make it better?

Live: just set the session to night using this JavaScript line sessionStorage.setItem("mode", "night"); and refresh.

Alll files.

CSS files:

body{
    background-color: black;
    color: white;
}
.indx-contnt p {
    color: white !important;
}
.signature span, a {
    color: white;
}
h1{
    color:#f90 !important;
}
.latest li span{
    color: black !important;
}
.latest li a{
    color:white !important;
}

.contentlist li:nth-child(2) a{
    color:#2CAAE1 !important;
}

.contentlist li:nth-child(3) a{
    color:#0177B5 !important;
}

.contentlist li:nth-child(1) a{
    color:#717171 !important;
}

#rss{
    background-color: black;
}

.signature span, a{
    color: white !important;
}
.latest li a:hover {
    color: #f90 !important;
}

p, h1, h2,h4,span{
    color: white;
}

body{
    background-color: black;
    color: white;
}
.signature span, a{
    color: white !important;
}
p, h1, h2, h4, span {
    color: white !important;
}
.project span {
    color: black !important;
}
.card{
    background-color: #ffffff0f !important;
}
.card:hover {
    box-shadow: 10px 7px 10px 0px rgb(255, 153, 0) !important;
}
.card a{
    background-color: black !important;
}

#rss{
    background-color: black !important;
}

.card-title{
    color: #f90 !important; 
}

.posts a {
    color: white !important;
}

\$\endgroup\$
1
  • 1
    \$\begingroup\$ You have quite a few elements where you specify only one of background and foreground - that can interact very badly with the user's stylesheet (e.g. your p { color: white !important; } when user has p { background-color: white; color: black; }). \$\endgroup\$
    – Toby Speight
    Commented May 22, 2018 at 8:22

1 Answer 1

Reset to default
3
\$\begingroup\$

I like the idea you have here and the implementation looks good. You are right though that it is not best practice to use !important frequently.

I'd think you could avoid using !importants simply with either of the following:

  • Order: having night mode CSS come later/below day mode CSS
  • Specificity: as in div.nightmode or .nightmode div would override just div.

Below I used specificity as the order was more to keep it organized. Sorry I didn't revise your code but I wanted to test this out for myself and see if my simple idea would work.

Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Night Mode Test</title>
    <style media="screen">
body, div, h1, p, button{
  transition-duration: 0.4s;
}

body{
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;

        padding: 30px;
      }

      div{
        box-shadow: 0 0 10px gray;
        text-align: center;
        padding: 15px;
      }

      button{
        background: green;
        color: white;
        padding: 1em 3em;
        border-radius: 10px;
        margin: 50px;
        outline: 0;
        border: 0;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
      }


      .nightMode button{
        background: white;
        color: green;
      }

      .nightMode{
        background: black;
      }

      .nightMode div{
        box-shadow: 0 0 10px gold;
      }

      .nightMode h1, .nightMode p{
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="">
      <h1>Some Sample Stuff</h1>
      <p>Sample Text...</p>
    </div>

    <button id="toggleNightMode" type="button" name="button">Toggle</button>



  <script type="text/javascript">
    const button = document.getElementById('toggleNightMode');
    button.addEventListener('click', function(event){
      if(document.body.classList.contains('nightMode')) document.body.classList.remove('nightMode');
      else document.body.classList.add('nightMode');
    });
  </script>
  </body>
</html>

So I'd recommend doing the following:

  • Combine some of your CSS that uses the same color and/or background
  • Use specificity to override CSS instead of !importants. I'd recommend using a class or two (dayMode, nightMode). My small example only needed one: if it lacked the nightMode class then I knew it was day mode.

CodePen Example

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.