Yumma CSS - Alternatif baharu kepada Rangka Kerja CSS moden

Jika anda biasa dengan Bootstrap dan Tailwind CSS, anda tahu betapa sukarnya untuk menyahpepijat pangkalan kod anda, terutamanya apabila anda sedang mengusahakan aplikasi yang besar. Sejujurnya, setiap projek Bootstrap atau Tailwind CSS yang saya kerjakan berakhir dengan terlalu banyak baris kod, dan ia sampai ke tahap di mana saya bosan dengan pendekatan itu.

Bagaimana Yumma CSS Membandingkan?

Yumma CSS menggunakan konvensyen penamaan singkatan yang serupa dengan sintaks CSS biasa.

Pemusatan menggunakan Flexbox

Mari kita lihat bagaimana tambang berpusat dengan kotak Flex dalam rangka kerja ini:

Menggunakan Bootstrap

<div class="align-items-center d-flex justify-content-center">...</div>

Menggunakan Tailwind CSS

<div class="items-center flex jc-c">...</div>

Menggunakan Yumma CSS

<div class="ai-c d-f jc-c">...</div>

Pertanyaan media dan varian

Yumma CSS menawarkan satu set kelas pseudo dan titik putus responsif seperti sm:*, md:*, lg:*, xl:* dan xxl:*. Ini memudahkan untuk menyesuaikan reka bentuk anda berdasarkan saiz skrin dan interaksi pengguna.

Komponen bangunan

Mari kita lihat bagaimana Yumma CSS menyusun terhadap Tailwind CSS apabila membina komponen Grid Kad.

Kad CSS Tailwind

<div class="grid h-screen w-full gap-4 p-6 md:grid-flow-dense md:grid-cols-3 md:grid-rows-3">
    <div
        class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-span-1 md:row-span-2">
        <div class="flex-grow">
            <h1 class="mb-2 text-2xl font-semibold text-gray-800">
                Yumma OS 7.2
            </h1>
            <p class="mb-4 text-sm text-gray-600">
                This update has some important bug fixes and also fixes an issue that
                was preventing users from enabling or disabling Advanced Data Protection.
            </p>
            <a class="text-sm text-pink-500 underline" href="/">
                What's new?
            </a>
        </div>
        <div class="mt-auto flex flex-col space-y-4">
            <button class="h-12 rounded-md bg-pink-600 px-6 font-semibold text-white">
                Update Now
            </button>
            <button class="h-12 rounded-md border border-gray-200 px-6 font-semibold text-gray-900">
                Update Tonight
            </button>
        </div>
    </div>

    <div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-1">
        <div class="flex-grow">
            <h1 class="mb-2 text-2xl font-semibold text-gray-800">
                Patch 6.2
            </h1>
            <p class="mb-4 text-sm text-gray-600">
                This update fixes security issues. Install it to keep your system safe.
            </p>
        </div>
        <button class="mb-4 mt-auto h-12 rounded-md bg-pink-600 px-6 font-semibold text-white">
            Update Now
        </button>
    </div>

    <div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-2">
        <div class="flex-grow">
            <h1 class="mb-2 text-2xl font-semibold text-gray-800">
                What's new?
            </h1>
            <p class="mb-4 text-sm text-gray-600">
                Take a look at the new features in the latest release, including better user interface elements and a more stable system.
            </p>
            <a class="text-sm text-pink-500 underline" href="/">
                Learn more
            </a>
        </div>
    </div>
</div>

Kad CSS Yumma

<div class="d-g h-1/1 w-full g-4 p-6 md:gaf-d md:gtc-3 md:gtr-3">
    <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gc-s-1 md:gr-s-2">
        <div class="fg-1">
            <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
                Yumma OS 7.2
            </h1>
            <p class="mb-4 fs-sm tc-l-lead-3">
                This update has some important bug fixes and also fixes an issue that was preventing users from enabling or disabling Advanced Data Protection.
            </p>
            <a class="fs-sm tc-pink tdl-u" href="/">
                What's new?
            </a>
        </div>
        <div class="mt-auto d-f fd-c s-y-4">
            <button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white">
                Update Now
            </button>
            <button class="h-12 rad-2 b-1 bc-l-silver-5 px-6 fw-600 tc-lead">
                Update Tonight
            </button>
        </div>
    </div>

    <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-1">
        <div class="fg-1">
            <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
                Patch 6.2
            </h1>
            <p class="mb-4 fs-sm tc-l-lead-3">
                This update fixes security issues. Install it to keep your system safe.
            </p>
        </div>
        <button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white mt-auto mb-4">
            Update Now
        </button>
    </div>

    <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-2">
        <div class="fg-1">
            <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
                What's new?
            </h1>
            <p class="mb-4 fs-sm tc-l-lead-3">
                Take a look at the new features in the latest release, including better user interface elements and a more stable system.
            </p>
            <a class="fs-sm tc-pink tdl-u" href="/">
                Learn more
            </a>
        </div>
    </div>
</div>

Kebolehselenggaraan dan kebolehskalaan

Apabila anda sedang menjalankan projek besar, sangat penting untuk dapat mengekalkan kerja anda. Itulah sebabnya kami telah mereka Yumma CSS untuk menjadi modular dan berskala. Ia merupakan pilihan yang bagus untuk aplikasi yang menggunakan rangka kerja moden seperti React atau Vue. Nama kelasnya yang ringkas dan struktur tersusun membantu anda memastikan gaya anda terurus dan kod anda bersih.

Yumma CSS	Property
ai-c	align-items: center;
bg-blue	background-color: #3575dd;
d-f	display: flex;
jc-c	justify-content: center;
m-4	margin: 1rem;
p-4	padding: 1rem;
rad-1	border-radius: 4px;
ta-c	text-align: center;
tc-white	color: #ffffff;
w-full	width: 100%;

Kesimpulan

Yumma CSS adalah tentang mengekalkan perkara yang ringkas dan minimalis apabila ia melibatkan penggayaan. Ia benar-benar boleh membantu untuk mengurangkan kerumitan dan keterlaluan kod anda. Konvensyen penamaan dan reka bentuk modularnya sangat ringkas dan menjadikannya alat yang hebat untuk pembangunan web moden. Cuba Yumma CSS dan lihat bagaimana ia boleh membantu anda bekerja dengan lebih cekap pada projek anda!

Ketahui lebih lanjut tentang Yumma CSS

Atas ialah kandungan terperinci Yumma CSS - Alternatif baharu kepada Rangka Kerja CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!