Mejora de reglas CSS

No tengo mucha idea de CSS y me gustaría que alguien me dijera si el código que tengo escrito es mejorable y cómo, por favor:

window.addEventListener('load',()=>{

    const   btn = document.getElementsByClassName('dropdown-series')(0),
            light = document.getElementsByClassName('lightness-series')(0), 
            dark = light.getElementsByTagName('span')(0),
            drop = btn.getElementsByTagName('span')(0),
            list = document.getElementById('list-ins');

    btn.addEventListener('click', ()=>{
        dropList(btn, drop, list);
    });

    light.addEventListener('click', ()=>{
        changeMode(dark);
    })

});

function dropList(btn, drop, list){
    let timout;

    if(btn.getAttribute('drop') == 'on'){
            btn.setAttribute('drop', 'off');
            list.style.top = '-750px';
            drop.style.transform = 'rotate(0deg)';
        } else {
            btn.setAttribute('drop', 'on');
            list.style.top = '50px';
            drop.style.transform = 'rotate(180deg)';
        }

    list.addEventListener('mouseleave', ()=>{
        timout = setTimeout(()=>{
            btn.setAttribute('drop', 'off');
            list.style.top = '-750px';
            drop.style.transform = 'rotate(0deg)';
        },5000);
    });

    list.addEventListener('mouseover', ()=>{
        window.clearTimeout(timout);
    });
}

function changeMode(dark){
    if(document.body.classList.contains('dark-theme')){
        document.body.classList.remove('dark-theme');
        dark.style.transform = 'rotate(0deg)';
        dark.innerHTML = 'brightness_4';
    } else {
        document.body.classList.add('dark-theme');
        dark.style.transform = 'rotate(-360deg)';
        dark.innerHTML = 'brightness_7';
    }
}
/*********************/
/********CLASS********/
/*********************/
body{
    --color-bg: #FFF;
    --color-hbg: #F0F0F0;
    --color-text: #444;
}

body.dark-theme{
    --color-bg:#444;
    --color-hbg:#222;
    --color-text:#F5DEB3;
}
/*********************/
/********CLASS********/
/*********************/



html, body, .head-ban, .title, .list-ins, .list-ins ul, .list-ins ul li, .list-ins ul li span{
    background-color: var(--color-bg);
    color: var(--color-text);
    margin:0;
    padding:0;
    transition: 1s;
}

.head-ban{
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-hbg);
    z-index: 2;
}

.dropdown-series{
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    left: 50px;
    cursor: pointer;
    border-radius: 50%;
}

.dropdown-series span{transition: 1s;border-radius: 50%;}
.dropdown-series span:hover{background-color: var(--color-bg);}

.lightness-series{
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0;
    right: 50px;
    cursor: pointer;
    border-radius: 50%;
}

.lightness-series span{transition: 1s;border-radius: 50%;}
.lightness-series span:hover{background-color: var(--color-bg);}

.cont{
    width: 1080px;
    height: 50px;
    margin: 0 auto;
    background-color: var(--color-hbg);
}

.title{
    width: auto;
    padding-top: 0px;
    margin: 0 auto;
    text-align: center;
    font-size: 42px;
    background-color: var(--color-hbg);
    color: var(--color-text);
}


.list-ins{
    width: 400px;
    height: auto;
    position: fixed;
    top: -750px;
    left: 0px;
    background-color: var(--color-hbg);
}

.list-ins ul{
    list-style: none;
    max-width: 400px;
    height: auto;
    display: block;
}

.list-ins ul li{
    max-width: 100%;
    height: 25px;
    padding: 25px;
    text-align: left;
    display: block;
    background-color: var(--color-hbg);
    z-index: 1;
}

.list-ins ul li span{
    float: right;
    background-color: var(--color-hbg);
    color: var(--color-text);
    transition: 1s;
}

.list-ins ul li:hover{background-color:var(--color-bg);transition:1s;}
.list-ins ul li:hover span{background-color:var(--color-bg);transition:1s;}
.list-ins ul li > ul{display:none;}
.list-ins ul li:hover > ul{max-width:50%;display:block;position:relative;top:-45px;left:375px;}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.material-icons.md-48 {font-size:48px;background-color:var(--color-hbg);color:var(--color-text);}
.material-icons.md-24 {font-size:24px;background-color:var(--color-hbg);color:var(--color-text);}
.transitting{transition:1s;}
<!DOCTYPE html>
<html>
<head>
    <title>Prub</title>
    <link rel="stylesheet" type="text/css" href="assets/_css/gen_styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src="https://es.stackoverflow.com/assets/_js/gen_scripts.js"></script>
</head>
<body>
<div class="head-ban">

    <div class="dropdown-series">
        <span class="material-icons md-48">arrow_drop_down</span>
    </div>

    <div class="cont transitting">
        <div class="title">
            <label>REINO INSECTA</label>
        </div>
    </div>

    <div class="lightness-series">
        <span class="material-icons md-48">brightness_4</span>
    </div>

</div>
<div class="list-ins" id="list-ins">
    <ul>
        <li>Hormigas</li>
        <li>Fásmidos
            <span class="material-icons md-24">arrow_right</span>
            <ul>
                <li>Insectos palo</li>
                <li>Insectos corteza</li>
                <li>Insectos hoja</li>
            </ul>
        </li>
        <li>Mántidos</li>
        <li>Arácnidos
            <span class="material-icons md-24">arrow_right</span>
            <ul>
                <li>Arañas</li>
                <li>Escorpiones</li>
                <li>Ambipligidos</li>
            </ul>
        </li>
        <li>Coleópteros</li>
    </ul>
</div>
</body>
</html>