Menguasai CSS: Memahami Cascade

Cascading Style Sheets (CSS) ialah teknologi asas web, membenarkan pembangun mengawal persembahan visual dokumen HTML. Walaupun sintaks CSS mungkin kelihatan mudah pada pandangan pertama, cara gaya digunakan dan diwarisi boleh menjadi sangat rumit. Memahami selok-belok ini adalah penting untuk menulis CSS yang cekap, boleh diselenggara dan boleh diramal.
Dalam panduan komprehensif ini, kami akan meneroka konsep lata dan warisan CSS.

Lata CSS

Lata ialah algoritma yang menentukan peraturan CSS yang digunakan pada elemen apabila wujud berbilang peraturan yang bercanggah. Adalah penting untuk memahami cara lata berfungsi untuk menulis CSS yang berkelakuan seperti yang diharapkan. Lata mempertimbangkan beberapa faktor dalam susunan berikut:

• 1 asal helaian gaya
• 2 gaya sebaris
• 3 Kekhususan pemilih
• 4 Pesanan sumber

Untuk menjadi lengkap, kami boleh menambah:

• 2.5 Gaya yang ditakrifkan dalam lapisan baca lebih lanjut
• 3.5 Gaya yang merangkumi sebahagian daripada DOM baca lebih lanjut

Mari kita pecahkan faktor yang mempengaruhi lata, mengikut keutamaan:

1. Asal Lembaran Gaya

CSS boleh datang daripada tiga sumber berbeza:

• 1 Gaya ejen pengguna: Ini ialah gaya lalai penyemak imbas. Setiap penyemak imbas mempunyai set gaya lalainya sendiri, itulah sebabnya HTML yang tidak digayakan boleh kelihatan berbeza sedikit merentas penyemak imbas.
• 2 Gaya pengguna: Ini ialah gaya tersuai yang ditetapkan oleh pengguna. Walaupun jarang berlaku, sesetengah pengguna mungkin mempunyai helaian gaya tersuai untuk mengatasi gaya lalai untuk kebolehaksesan atau pilihan peribadi.
• 3 Gaya pengarang: Ini ialah gaya yang anda tulis sebagai pembangun web.

Secara amnya, gaya pengarang lebih diutamakan daripada gaya pengguna, yang seterusnya mengatasi gaya ejen pengguna. Ini membolehkan pembangun menyesuaikan penampilan elemen sambil tetap menghormati pilihan pengguna apabila perlu.

2. Gaya Sebaris

Gaya yang digunakan terus pada elemen menggunakan atribut gaya mempunyai keutamaan yang sangat tinggi:

<p style="color: red;">This text will be red.</p>

Gaya sebaris akan mengatasi mana-mana gaya yang ditakrifkan dalam helaian gaya luaran atau teg, tanpa mengira kekhususannya (Itu tidak lagi benar jika anda menggunakan kata kunci !penting. Saya akan memahaminya sebentar lagi).

Menggunakan gaya sebaris secara amnya tidak digalakkan kerana ia mencampurkan pembentangan dengan kandungan dan menjadikan gaya lebih sukar untuk dikekalkan.

3. Kekhususan Pemilih

Kekhususan ialah konsep penting dalam CSS yang menentukan gaya yang digunakan pada elemen apabila wujud berbilang peraturan yang bercanggah. Setiap pemilih CSS mempunyai nombor kekhususan, yang boleh dikira untuk meramal gaya yang akan diutamakan.

Kekhususan biasanya diwakili sebagai nombor empat bahagian (a,b,c,d), di mana:

• a: Bilangan gaya sebaris (biasanya ditinggalkan)
• b: Bilangan pemilih ID
• c: Bilangan pemilih kelas, pemilih atribut dan kelas pseudo
• d: Bilangan pemilih unsur dan unsur pseudo

Nombor yang terhasil bukan asas 10. Sebaliknya, anggap ia sebagai lajur berasingan yang dibandingkan dari kiri ke kanan. Lihat contoh:

• p = (0,0,0,1)
• .class = (0,0,1,0)
• #id = (0,1,0,0)
• Gaya sebaris = (1,0,0,0)

Pertimbangkan dua peraturan yang bercanggah ini:

#header .nav li { color: blue; } /* (0,1,1,1) */ 
nav > li a { color: red; } /* (0,0,0,3) */

Peraturan pertama (0,1,1,1) mempunyai kekhususan yang lebih tinggi, jadi teks akan menjadi biru.

Pemilih kelas pseudo (seperti :hover) dan pemilih atribut (seperti [type="text"]) masing-masing mempunyai kekhususan yang sama seperti pemilih kelas.

Pemilih universal (*) dan penggabung (>, +, ~) tidak menjejaskan kekhususan.

Selain itu, kelas pseudo :not() juga tidak menambah nilai kekhususan; hanya pemilih di dalamnya dikira.

Beberapa alatan dalam talian boleh membantu mengira kekhususan (https://specificity.keegan.st/).

4. Pesanan Sumber

Jika semua yang lain adalah sama, peraturan yang muncul kemudian dalam lembaran gaya diutamakan:

.button { background-color: blue; }
.button { background-color: green; }  /* This one wins */

Dalam contoh ini, butang akan mempunyai latar belakang hijau.

Penggantian Berkuasa

Walaupun memahami lata adalah penting untuk menulis CSS yang boleh diselenggara, terdapat satu lagi teka-teki yang boleh mengatasi semua peraturan yang telah kita bincangkan setakat ini: kata kunci !penting.

Betapa !penting Berfungsi

Kata kunci !penting boleh mengatasi semua pertimbangan lain dalam lata, kecuali pengisytiharan !penting lain yang lebih diutamakan asalnya.

/* styles.css */ 
.button {
  background-color: blue !important;
}

<!-- index.html -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button style="background-color: red"> My button </button> 
    <!-- The color will be blue due to !important above -->
</body>

In this example, even though inline styles usually have the highest priority, the button will still have a blue background because of the !important declaration.

The Cascade and !important

The !important keyword actually introduces additional layers to the cascade. The full order of precedence, from highest to lowest, is:

• User agent important declarations
• User important declarations
• Author important declarations
  • Important Inline styles
  • Important not inlined styles
• Author normal declarations
  • Inline styles
  • Not inlined styles
• User normal declarations
• User agent normal declarations

When to Use it

While !important can be tempting as a quick fix, it's generally considered a last resort. Overuse can lead to specificity wars and make your CSS harder to maintain. Legitimate use cases include:

• Overriding third-party styles you can't modify
• Creating utility classes that should always apply
• Ensuring critical accessibility styles are applied

A Potential Solution To Simplify Specificity Management

If you find yourself using !important often, consider refactoring your CSS to use more specific selectors or a more modern approach like utilising :is() and :where() to write more flexible and maintainable styles. (I talk about these two in more details here)

Also, the @layer at-rule, which is fairly supported, allows you to create "layers" of styles with explicitly defined order of precedence:

@layer base, components, utilities;

@layer utilities {
  .btn { padding: 10px 20px; }
}

@layer components {
  .btn { padding: 1rem 2rem; }
}

This offers a more structured approach to managing style precedence without resorting to !important or engaging in a specificity arms race. However, I haven’t used this in a production project myself, if you do, I’d love to hear about your experience :)

Inheritance

Passing Styles Down the DOM Tree

Inheritance is another fundamental concept in CSS. Some CSS properties are inherited by default, meaning child elements will take on the computed values of their parents. This is particularly useful for text-related properties like color, font, font-family, font- size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing.

body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

In this example, all text within the body will inherit these styles unless explicitly overridden. This allows for efficient styling of document-wide typography without having to repeat rules for every element.

A few others inherit as well, such as the list properties: list-style, list-style-type, list-style-position, list-style-image, and some other table related properties

Not all properties are inherited by default. For example, border and padding are not inherited, which makes sense – you wouldn't want every child element to automatically have the same border as its parent.

Inheritance keywords

CSS provides several keywords to give you fine-grained control over inheritance and to reset styles:

• The inherit keyword forces a property to inherit its value from its parent element (This can be useful for properties that don't inherit by default, like border in this example).
• The initial keyword resets a property to its initial value as defined by the CSS specification (This can be helpful when you want to completely reset an element's styling).
• The unset keyword acts like inherit for inherited properties and initial for non-inherited properties (This provides a flexible way to reset properties without needing to know whether they're inherited or not).
• The revert keyword resets the property to the value it would have had if no author styles were applied (This is useful when you want to fall back to browser defaults rather than CSS-defined initial values).

The initial and unset keywords override all styles, affecting both author and user-agent stylesheets. This means they reset the element's styling to its default state, ignoring any previous styling rules applied by the author or the browser.

However, there are scenarios where you only want to reset the styles you’ve defined in your author stylesheet, without disturbing the default styles provided by the browser (user-agent stylesheet). In such cases, the revert keyword is particularly useful. It specifically reverts the styles of an element back to the browser’s default styles, effectively undoing any custom author-defined styles while preserving the inherent browser styling.

Perhatikan bahawa apabila menggunakan sifat trengkas nilai yang ditinggalkan ditetapkan secara tersirat kepada nilai awalnya. Ini berpotensi mengatasi gaya lain yang telah anda tetapkan di tempat lain.

Membungkus

Dengan memahami selok-belok ciri lata, warisan dan CSS moden, anda akan lebih bersedia untuk menulis helaian gaya yang cekap, boleh diselenggara dan berkuasa. Ingat, CSS bukan hanya tentang menjadikan sesuatu kelihatan baik – ia tentang mencipta reka bentuk yang teguh dan fleksibel yang berfungsi merentas pelbagai peranti dan penyemak imbas.

Atas ialah kandungan terperinci Menguasai CSS: Memahami Cascade. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!