I am not a Coder But This Is How I Write CSS

I just wondering if there are various types of programmers outside there? Just like in the world of the painter which has various types eg. Abstract, Expressionism, Impressionism, Pop art, etc... and all are defined by how they paint on their canvas.

Since both, programmers and painters have many similarities, they start with P and end with R or S. And they also work together with Canvas.

I actually not a programmer or even a coder. But I sometimes write HTML, CSS, and JS just to maintain my small business website. Btw I like to have as small as capital in my business website like using a free WordPress theme but it comes from a reputable agency.

Example for Back-to-top button

Okay... this is not to teach you on how to make a Back-to-top element. Since my theme is free with many limitations like no feature of back to top button, then I will make add-to-top button without a plugin.

HTML

<div id="to_topbtn"><a href="#" title="Go-Top!">Top!</a></div>

CSS

And this is how I write CSS, and I'm wondering what type of me with that kind of CSS.

#to_topbtn {
    animation: totopbtnmove 4s;
    animation-iteration-count: 1;
    bottom: 145px;
    opacity: 1;
    position: fixed;
    right: 15px;
    /* scroll-behavior: smooth; i put this on my html */
    z-index: 20;
}

#to_topbtn:hover {
    opacity: 0.5;
}

@keyframes totopbtnmove {
  from {bottom: 0px;}
  to {bottom: 145px;}
}

#to_topbtn a {
    align-items: center;
    background-color: #fcaf3b;
    border-radius: 50%;
    box-shadow:3px 3px #ab641d;
    color:#000;
    direction: ltr;
    display: flex;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    line-height: normal;
    padding:0;
    transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    width: 48px;
}

#to_topbtn a:hover {
    padding:4px;
}

JS

function scroll_totopbtn() {
    var to_topbtn = $('#to_topbtn');
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1800) {
            to_topbtn.fadeIn(400);
        } else {
            to_topbtn.fadeOut(400);
        }
    });
    to_topbtn.click(function(){
        $('html, body').animate({scrollTop : 0},900);
        return false;
    });
}
scroll_totopbtn();

Okay, sorry... I may be over, I put some CSS properties that are supposedly not needed based on its best practices 🙃. I just want to make the properties sequentially from A to Z.

Again, I'm not a programmer nor an artist painter, I may be a (CSS Writer) perfectionism 😎. Thank you for your time!