بهینه سازی پروژه

سلام دوستان

 من در  بخش جی کوئری این پروژه با یه ساختار متفاوت تونستم حجم کلاس های css ای که نوشتیم رو خیلی کم تر کنم و ساختار پروژه بهینه تر شد هم از لحاظ خوانایی بهینه تر شد  و هم حجم کد ها کم تر شد یه خورده. امیدوارم مفید باشه.

 <div class="splitPage">

            <div class="page leftSide">
                <h1>سلام</h1>
                <a class="ctaBTN" href="#">بزن بریم</a>
            </div>

            <div class="page rightSide">
                <h1>سلام دوباره</h1>
                <a class="ctaBTN" href="#">آماده ای ؟</a>
            </div>
        </div>

.activePage > h1::after {
  width: 100%;
}

$(document).ready( ()=> {
    $(".page").each(function (indexInArray, valueOfElement) { 
        $(this).mouseenter(()=> {
            $(this).addClass(" activePage").css("width", "80%");
            $(this).siblings(".page").css({
                "width": "20%",
                "opacity":".5"
            })
        }
        );
        $(this).mouseleave(() => {
            $(this).removeClass(" activePage").css("width","50%")
            $(this).siblings(".page").css({
                "width": "50%",
                "opacity":"1"
            })
        })
    });
});

بقیه استایل هایی که قرار ندادم مربوط به استایل های اولیه پروژه است که استاد کد نویسی کردند