Amalan CSS Mengubah Permainan Yang Akan Meningkatkan Kod Anda

Setiap pembangun telah berada di sana – bergelut dengan CSS yang kelihatan mudah pada mulanya tetapi dengan cepat menjadi sukar digunakan. Dalam panduan ini, kami akan meneroka perangkap CSS biasa dan penyelesaian moden yang boleh diselenggara. Mari ubah CSS anda daripada bermasalah kepada profesional!

? Dapatkan petua CSS mingguan, coretan kod dan tutorial terus ke peti masuk anda - 100% percuma!

1. Unit: Bebas daripada Piksel

Cara Yang Salah:

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

Cara yang Lebih Baik:

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

Menggunakan unit relatif menjadikan reka bentuk anda responsif dan boleh diakses. Skala REM dengan saiz fon pilihan pengguna, manakala unit port pandangan memastikan reka letak anda menyesuaikan diri dengan saiz skrin yang berbeza. Sentiasa pertimbangkan bahawa pengguna mungkin mengezum atau menukar saiz fon asas mereka.

2. Tetapan Semula CSS: Bermula Baru

Cara Yang Salah:

/* Starting without any reset, relying on browser defaults */

Cara yang Lebih Baik:

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

Tetapan semula CSS memastikan pemaparan yang konsisten merentas penyemak imbas yang berbeza. Sifat bersaiz kotak: kotak sempadan menjadikan pengiraan lebar menjadi intuitif dengan memasukkan pelapik dan jidar dalam jumlah lebar elemen.

3. Flexbox lwn. Float: Penyelesaian Reka Letak Moden

Cara Yang Salah:

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

Cara yang Lebih Baik:

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

Flexbox menyediakan reka letak yang berkuasa dan fleksibel dengan kurang kod. Ia mengendalikan jarak, penjajaran dan responsif dengan lebih elegan daripada elemen terapung dan ia lebih disokong dalam penyemak imbas moden.

4. Pengurusan Warna: Pembolehubah untuk Ketekalan

Cara Yang Salah:

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

Cara yang Lebih Baik:

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

Pembolehubah CSS (sifat tersuai) menjadikan mengekalkan warna yang konsisten lebih mudah dan membolehkan penukaran tema. Ia juga menjadikan kod anda lebih mudah diselenggara dan mengurangkan risiko ketidakkonsistenan.

5. Pertanyaan Media: Pendekatan Diutamakan Mudah Alih

Cara Yang Salah:

/* Desktop-first approach */
.container {
    width: 1200px;
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

Cara yang Lebih Baik:

/* Mobile-first approach */
.container {
    width: 100%;
}
@media (min-width: 48em) {
    .container {
        width: 90%;
        max-width: 75rem;
    }
}

Reka bentuk yang diutamakan mudah alih memastikan gaya asas anda berfungsi untuk peranti yang lebih kecil, kemudian secara beransur-ansur meningkatkan pengalaman untuk skrin yang lebih besar. Pendekatan ini biasanya menghasilkan kod yang lebih bersih dan boleh diselenggara.

6. Kekhususan: Menjaganya Mudah

Cara Yang Salah:

#header div.navigation ul li a.active {
    color: blue;
}

Cara yang Lebih Baik:

.nav-link--active {
    color: var(--primary-color);
}

Kekhususan yang lebih rendah menjadikan gaya lebih mudah untuk dikekalkan dan ditindih apabila diperlukan. Gunakan konvensyen penamaan BEM atau metodologi serupa untuk mencipta kelas khusus yang bermakna tanpa sarang yang mendalam.

7. Tipografi: Saiz Fon Bendalir

Cara Yang Salah:

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

Cara yang Lebih Baik:

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

Menggunakan clamp() menghasilkan tipografi responsif yang menskala dengan lancar antara saiz minimum dan maksimum. Ini menghapuskan keperluan untuk berbilang pertanyaan media hanya untuk saiz fon.

8. Susun Atur Grid: Sistem Kad yang Betul

Cara Yang Salah:

/* Starting without any reset, relying on browser defaults */

Cara yang Lebih Baik:

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

Grid CSS dengan muat auto dan minmax() mencipta reka letak responsif yang melaraskan secara automatik kepada ruang yang tersedia. Pendekatan ini memerlukan kurang kod dan mengendalikan kes tepi dengan lebih baik.

9. Animasi: Pengoptimuman Prestasi

Cara Yang Salah:

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

Cara yang Lebih Baik:

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

Tentukan sifat yang tepat untuk dianimasikan dan bukannya menggunakan semua dan gunakan perubahan dan kelegapan apabila boleh kerana ia dioptimumkan untuk prestasi. Gunakan kehendak-perubahan dengan berhati-hati untuk elemen animasi yang kerap.

10. Sifat Tersuai untuk Varian Komponen

Cara Yang Salah:

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

Cara yang Lebih Baik:

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

Menggunakan sifat tersuai CSS untuk varian mengurangkan pertindihan kod dan menjadikan komponen lebih mudah diselenggara. Ia juga memudahkan untuk mencipta variasi yang konsisten merentas sistem reka bentuk anda.

Kesimpulan

CSS moden menyediakan alatan berkuasa yang boleh menjadikan kod anda lebih boleh diselenggara, berprestasi dan berskala. Dengan mengikuti amalan terbaik ini, anda akan mencipta helaian gaya yang lebih mantap yang lebih mudah untuk diselenggara dan diubah suai. Ingat, matlamatnya bukan hanya untuk membuat sesuatu berfungsi – tetapi untuk menjadikannya berfungsi dengan baik untuk pengguna dan pembangun.

Atas ialah kandungan terperinci Amalan CSS Mengubah Permainan Yang Akan Meningkatkan Kod Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!