Kesilapan SS Yang Sering Dilakukan Pemula

CSS tidak semudah yang dilihat dan pembangun sering melakukan beberapa kesilapan yang menyebabkan mereka bergelut dengan perkara yang perlu dilakukan. CSS dianggap sebagai bahasa yang tidak intuitif dan sukar untuk digunakan kerana kesilapan biasa ini yang menghalang kebanyakan pembangun apabila mereka cuba menulis CSS. Akibatnya, kebanyakan pembangun memilih untuk menggunakan rangka kerja CSS seperti Bootstrap dan Tailwind CSS untuk mengelak daripada menulis CSS mereka sendiri.

Dalam blog ini, kita akan membincangkan lima kesilapan biasa yang sering dilakukan oleh pembangun. Menyedari dan mengelakkan kesilapan ini akan membantu anda menulis CSS yang:

• Berfungsi merentas peranti—bukan hanya komputer riba anda
• Berfungsi pada kali pertama anda mencubanya
• Ia membuatkan anda kurang kecewa dengan CSS

Jom selami.

Kesilapan 1: Tidak menggunakan CSS Reset

Ini adalah salah satu penemuan saya yang memeranjatkan dan saya hanya menyedari bahawa saya telah melakukan kesalahan CSS selama ini. Penyemak imbas mempunyai gaya lalai yang berfungsi sebagai sandaran jika helaian gaya tidak wujud. Walau bagaimanapun, gaya lalai ini berbeza merentas penyemak imbas. Walau apa pun, dua penyemak imbas jarang memberikan penggayaan lalai yang sama, jadi satu-satunya cara sebenar untuk memastikan gaya anda berkesan ialah menggunakan tetapan semula CSS.

Tetapan semula CSS memerlukan penetapan semula (atau, sebaliknya, tetapan) semua gaya semua elemen HTML kepada nilai garis dasar yang boleh diramal. Keindahan ini ialah sebaik sahaja anda memasukkan tetapan semula CSS dengan berkesan, anda boleh menggayakan semua elemen pada halaman anda seolah-olah semuanya sama untuk bermula.

Tetapan semula CSS ialah senarai kosong yang membantu anda mempunyai penggayaan yang konsisten merentas penyemak imbas yang berbeza. Selalunya, ini memerlukan penetapan margin:0 dan padding:0, walaupun terdapat keperluan untuk menetapkan semula elemen lain.
Berikut ialah contoh kod tetapan semula:

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol,
ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}

Kesilapan 2: Menggunakan Unit px

Saya juga sebenarnya bersalah kerana menggunakan unit px untuk atribut saiz fon, jidar, padding dan ketinggian atau berat. Walaupun menggunakan unit px boleh dilakukan dalam beberapa keadaan, terlalu bergantung pada unit tersebut membawa kepada isu kebolehaksesan.

Menurut MDN, Menentukan saiz fon dalam px tidak boleh diakses, kerana pengguna tidak boleh menukar saiz fon dalam sesetengah penyemak imbas. Sebagai contoh, pengguna yang mempunyai penglihatan terhad mungkin ingin menetapkan saiz fon jauh lebih besar daripada saiz yang dipilih oleh pereka web. Elakkan menggunakannya untuk saiz fon jika anda ingin mencipta reka bentuk inklusif.

Walau bagaimanapun, unit px juga tidak baik untuk menetapkan ketinggian dan lebar untuk kandungan, kerana kandungan mungkin juga melimpah jika pengguna meningkatkan saiz fon lalai dalam penyemak imbas. Menggunakan pertanyaan dalam media unit px juga mempengaruhi reka letak apabila pengguna mengezum masuk atau menukar saiz fon lalai. 

? Kesilapan

p {
  font-size: 16px;
 /*this prevents users from resizing the font-size*/
  line-height: 20px;
  margin-bottom: 8px;
}

✅ Betul

body {
  font-size: 16px;
}
p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Kesilapan 3: Menggunakan ID sebagai Pemilih

Salah satu masalah yang paling diabaikan dalam pembangunan web ialah penggunaan pemilih yang melebihi kelayakan yang terlalu spesifik dan sukar untuk ditindih. Pemilih ID mempunyai lebih kekhususan dalam CSS, bermakna anda tidak boleh mengatasinya atau menggunakan semula gaya dalam komponen lain.

Sentiasa tulis pemilih CSS anda dengan tahap kekhususan yang sangat minimum yang diperlukan untuk berfungsi. Memasukkan semua kelembutan tambahan itu mungkin menjadikannya kelihatan lebih selamat dan lebih tepat, tetapi apabila melibatkan pemilih CSS, hanya terdapat dua tahap kekhususan: khusus dan tidak cukup khusus.

? Kesilapan

#header {
  font-size: 1em;
  line-height: normal;
}

✅ Betul

.header {
  font-size: 1em;
  line-height: normal;
}

Secara amnya, anda harus mengelak daripada menggunakan pemilih yang terlalu khusus dalam CSS. Kejohanan Kekhususan CSS menggambarkan sebab idea yang tidak baik untuk menggunakan pemilih yang terlalu berkuasa. Apabila pemilih sangat berkuasa dalam kejohanan, ia menang dengan cepat dan awal, yang bermaksud satu-satunya cara untuk mengalahkannya ialah dengan menulis pemilih yang lebih berkuasa.

Kecenderungan kekhususan ini sentiasa meningkat dikenali sebagai perang kekhususan. Sama seperti menyimpan senjata nuklear, tiada siapa yang menang dalam perang ini—perkara menjadi lebih sukar untuk dikurangkan apabila kekhususan meningkat. Cara terbaik untuk mengelakkan perang kekhususan sepenuhnya adalah dengan tidak menggunakan pemilih yang sangat spesifik pada mulanya.

Kesilapan-4: Warna Dinamakan

Satu lagi kesilapan yang saya temui semasa melakukan penyelidikan ialah masalah dengan warna yang dinamakan. Pembangun sering mengabaikan bahawa warna yang anda anggap sebagai warna tertentu kelihatan sangat berbeza merentas penyemak imbas.

Dengan menyebut: warna: merah; Anda pada asasnya mengatakan bahawa penyemak imbas harus memaparkan apa yang difikirkannya merah. Jika anda telah belajar apa-apa daripada membuat bahan berfungsi dengan betul dalam semua penyemak imbas, anda tidak boleh membiarkan penyemak imbas memutuskan cara memaparkan halaman web anda.

Instead, you should go to the effort to find the actual hex value for the color you’re trying to use. That way, you can make sure it’s the same color displayed across all browsers. You can use a color cheat sheet that provides a preview and the hex value of a color.

? Mistake

.header {
  font-size: 1em;
  line-height: normal;
  color: red;
}

✅ Correct

.header {
  font-size: 1em;
  line-height: normal;
  color: rgb(255, 0, 0);
}

Mistake 5: Not Using Shorthand Properties

As a developer, one rule is to never repeat yourself. Therefore, you should find ways to minimize the number of lines of code that you write.

One common problem with CSS is understanding shorthand properties for things like margin, padding and inset. As a confession, I also struggle with this problem and often have to look to the documentation on whether margin: 0 5px sets the margin in top-bottom or left-right.

? Mistake

.my-cool-div {
  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left: 0;
  background-image: url(background.png);
  background-repeat: repeat-y;
  background-position: center top;
}

✅ Correct

.my-cool-div {
  margin: 50px 0;
  background: url(background.png) repeat-y center top;
}

Using shorthand CSS improves efficiency and makes it easier to maintain our code. However, this could take time to master and I recommend checking the documentation.

Mistake 6: Overreliance on Position Absolute

Position absolute is that one band-aid solution that can cause more problems as it breaks the document flow. When using positions absolute, MDN recommends that you ensure that elements that are positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.

Position absolute should be the last choice since it has some effects such as pulling the element out of the flow and making it stack over other things. 

Furthermore, elements positioned absolutely don't naturally adapt to changes in screen size or parent element dimensions, which can break the layout on different devices.

? Mistake

.sidebar {
  position: absolute;
  top: 50px;
  right: 0;
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

✅ Correct

.sidebar {
  transform: translateY(50px) translateX(0);
  /* Moves the element down by 50px */
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

In this example, we see that we can achieve the same functionality without breaking the document flow by using transform to move the sidebar down by 50px.

Mistake 7: Collapsing Margins

Collapsing margins can be really hard to understand and frustrating to decode since you might not understand why your applied margin or padding is not working as expected.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Understanding margin collapse is essential for achieving consistent spacing in your layouts, particularly in scenarios where you want to ensure a specific amount of space between elements.

One solution to collapsing margins is using padding, especially for child elements rather than margins. It is generally advised not to add margin to the child element, especially in JavaScript frameworks such as react since this might affect their reusability.

You must always remember that adding a margin to a child element can affect the position of the parent element as the margins collapse.

? Mistake

/* html */
/* 
<div class="element1">Element 1</div>
<div class="element2">Element 2</div> 
*/
.element1 {
  margin-bottom: 20px;
}
.element2 {
  margin-top: 30px;
}
/* the total margin will be 30px rather than 50px */

✅ Correct

.element1 {
  margin-bottom: 20px;
  padding-bottom: 1px;
  /* Prevents collapse */
}
.element2 {
  margin-top: 30px;
}

Conclusion

I hope you enjoyed this article, and that it gave you a sense of how to avoid the topmost common mistakes developers make when they write CSS. There are many mistakes not covered in this blog such as separating between layout and content elements, overusing flex box and much more. Comment below with some other mistakes.

Atas ialah kandungan terperinci Kesilapan SS Yang Sering Dilakukan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!