SS-Fehler, die Anfänger oft machen

CSS ist nicht so einfach, wie es aussieht, und Entwickler machen oft Fehler, die dazu führen, dass sie nicht wissen, was sie tun sollen. Aufgrund dieser häufigen Fehler, die die meisten Entwickler beim Schreiben von CSS behindern, wird CSS als eine unintuitive und schwer zu handhabende Sprache angesehen. Aus diesem Grund entscheiden sich die meisten Entwickler für die Verwendung von CSS-Frameworks wie Bootstrap und Tailwind CSS, um das Schreiben ihres eigenen CSS zu vermeiden.

In diesem Blog besprechen wir fünf häufige Fehler, die Entwickler häufig machen. Das Erkennen und Vermeiden dieser Fehler wird Ihnen helfen, CSS zu schreiben, das:

• Funktioniert auf allen Geräten – nicht nur auf Ihrem Laptop
• Funktioniert beim ersten Versuch
• Es macht Sie weniger frustriert mit CSS

Lass uns eintauchen.

Fehler 1: CSS Reset nicht verwenden

Dies ist eine meiner überraschenden Entdeckungen und mir ist nur klar geworden, dass ich CSS die ganze Zeit falsch gemacht habe. Browser verfügen über Standardstile, die als Ersatz dienen, wenn das Stylesheet nicht vorhanden ist. Diese Standardstile unterscheiden sich jedoch je nach Browser. In jedem Fall bieten zwei Browser selten identische Standardformate. Die einzige wirkliche Möglichkeit, sicherzustellen, dass Ihre Formatvorlagen wirksam sind, ist die Verwendung eines CSS-Resets.

Bei einem CSS-Reset werden alle Stile aller HTML-Elemente auf einen vorhersehbaren Grundwert zurückgesetzt (oder vielmehr eingestellt). Das Schöne daran ist, dass Sie nach dem effektiven Einbinden eines CSS-Resets alle Elemente auf Ihrer Seite von Anfang an so gestalten können, als wären sie alle gleich.

CSS-Reset ist ein unbeschriebenes Blatt, das Ihnen hilft, in verschiedenen Browsern ein einheitliches Design zu gewährleisten. Meistens erfordert dies das Festlegen von margin:0 und padding:0, obwohl auch andere Elemente zurückgesetzt werden müssen.
Hier ist ein Beispiel für einen Reset-Code:

* {
  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: "" "";
}

Fehler 2: Verwendung von px-Einheiten

Ich bin tatsächlich auch schuldig, px-Einheiten für Schriftgrößen, Ränder, Abstände und Höhen- oder Gewichtsattribute verwendet zu haben. Während die Verwendung von px-Einheiten in manchen Fällen in Ordnung sein kann, führt eine übermäßige Abhängigkeit von ihnen zu Barrierefreiheitsproblemen.

Laut MDN ist das Definieren von Schriftgrößen in px nicht zugänglich, da der Benutzer die Schriftgröße in einigen Browsern nicht ändern kann. Benutzer mit eingeschränktem Sehvermögen möchten beispielsweise die Schriftgröße möglicherweise viel größer einstellen als die von einem Webdesigner gewählte Größe. Vermeiden Sie die Verwendung für Schriftgrößen, wenn Sie ein umfassendes Design erstellen möchten.

Px-Einheiten eignen sich jedoch auch schlecht zum Festlegen von Höhe und Breite für Inhalte, da der Inhalt möglicherweise auch überläuft, wenn der Benutzer die Standardschriftgröße im Browser erhöht. Die Verwendung von px-Einheiten in Medienabfragen wirkt sich auch auf das Layout aus, wenn ein Benutzer hineinzoomt oder die Standardschriftgröße ändert. 

? Fehler

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

✅ Richtig

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

Fehler 3: IDs als Selektoren verwenden

Eines der am häufigsten übersehenen Probleme bei der Webentwicklung ist die Verwendung überqualifizierter Selektoren, die zu spezifisch und schwer zu überschreiben sind. ID-Selektoren sind in CSS spezifischer, was bedeutet, dass Sie sie nicht überschreiben oder den Stil in einer anderen Komponente wiederverwenden können.

Schreiben Sie Ihre CSS-Selektoren immer mit dem Mindestmaß an Spezifität, das nötig ist, damit sie funktionieren. Das Einbeziehen all dieser zusätzlichen Informationen lässt es vielleicht sicherer und präziser erscheinen, aber wenn es um CSS-Selektoren geht, gibt es nur zwei Ebenen der Spezifität: spezifisch und nicht spezifisch genug.

? Fehler

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

✅ Richtig

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

Im Allgemeinen sollten Sie die Verwendung übermäßig spezifischer Selektoren in CSS vermeiden. Das CSS Specificity Tournament verdeutlicht, warum es keine gute Idee ist, zu leistungsstarke Selektoren zu verwenden. Wenn ein Selektor im Turnier sehr mächtig ist, gewinnt er schnell und früh, was bedeutet, dass die einzige Möglichkeit, ihn zu schlagen, darin besteht, einen noch leistungsfähigeren Selektor zu schreiben.

Diese Tendenz, dass die Spezifität immer weiter zunimmt, wird als Spezifitätskrieg bezeichnet. Ähnlich wie bei der Bevorratung von Atomwaffen gewinnt auch in diesem Krieg niemand – die Dinge werden nur mit zunehmender Spezifität schwieriger zu deeskalieren. Der beste Weg, einen ausgewachsenen Spezifitätskrieg zu vermeiden, besteht darin, überhaupt keine hochspezifischen Selektoren zu verwenden.

Fehler 4: Benannte Farben

Ein weiterer Fehler, den ich bei meiner Recherche entdeckt habe, ist das Problem mit benannten Farben. Entwickler ignorieren oft, dass das, was Sie als bestimmte Farbe wahrnehmen, in den verschiedenen Browsern sehr unterschiedlich aussieht.

Mit den Worten: Farbe: rot; Sie sagen im Wesentlichen, dass der Browser das anzeigen sollte, was er für rot hält. Wenn Sie etwas daraus gelernt haben, dafür zu sorgen, dass Dinge in allen Browsern korrekt funktionieren, sollten Sie niemals den Browser entscheiden lassen, wie Ihre Webseiten angezeigt werden.

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.

Das obige ist der detaillierte Inhalt vonSS-Fehler, die Anfänger oft machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!