CSS-Anfängerfehler: „Divitus“, absolute Positionierung

Es gibt einen Artikel bei Search-This, der auf ein paar ziemlich interessante Anfängerfehler hinweist. Hier sind einige Highlights und einige unserer eigenen

• Absolute Positionierung. – Eines der ersten Machtgefühle, das man beim Erlernen von CSS bekommt, ist das Wissen, dass man die Position und Größe jedes Elements auf der Seite mit im Wesentlichen X/Y-Koordinaten und Abmessungen steuern kann. Natürlich hat absolute Positionierung ihre Vorteile, aber im Allgemeinen nicht für tatsächlichen SeitenInhalt. Absolut positionierte Objekte ignorieren alle anderen Objekte und schränken Ihre Fähigkeit ein, flexibel mit Inhalten zu bleiben.
• Festlegen der Höhe (wenn Sie es nicht brauchen) – Es ist der Wunsch nach Kontrolle. Es ist verlockend, die Höhe eines Objekts zu erzwingen, damit es „so aussieht, wie Sie es möchten“, aber dies kann den Inhalt innerhalb dieses Objekts wirklich durcheinander bringen. Im Allgemeinen sollten Sie keine Höhen festlegen, sondern Ihre Objekte wachsen lassen, um das zu passen, was sich darin befindet, und Ihre Positionierung mit Rändern, Abständen und Floats steuern. Sehen Sie, was in der untenstehenden Box passiert. Sie können die Höhe mit Ihren Schriftarteinstellungen gerade richtig machen, aber wenn der Benutzer diese dann erhöht, bricht der Inhalt aus der Box heraus und sieht kaputt aus.

  [BILD FEHLT, Entschuldigung]

• „Divitius“ – Divs sind generische Seitenunterteilungen, die dazu dienen, Seiteninhalte in sinnvolle Abschnitte zu gliedern. CSS nutzt dies ziemlich stark, was Anfänger wirklich bemerken und worauf sie sich stürzen. Sobald sie sehen, dass sie alle möglichen Dinge kontrollieren können, indem sie Divs Klassen und IDs geben, fangen sie an, Divs für alles zu verwenden.

  <div id="header">
     <div class="bold">Heading</div>
  </div>
  
  <div id="subheader">
     <div class="bold">Sub Heading</div>
  </div>
  
  <div>This is the content</div>

  Dies ist unnötig und tatsächlich sogar schädlich, da Suchmaschinen HTML betrachten, um Ihre Seiteninhalte besser zu verstehen. <h1>-Tags bezeichnen einen „Header“ und erhalten daher von einem Suchroboter mehr Gewicht, wenn sie korrekt verwendet werden.

  <h1>Heading</h1>
  <h2>Sub Heading</h2>
  <p>This is the content</p>

  HTML gibt Ihnen Tags, um Ihren Inhalt zu beschreiben. Benutzen Sie sie. Das ist für alle gut.

• „Classitus“ – Ähnlich wie Divitus ist Classitus, wenn Anfänger Klassen auf Dinge anwenden, die sie wirklich nicht brauchen. Das Anwenden von class=”link” auf ein <a>-Tag ist völlig sinnlos, stylen Sie einfach das <a>-Tag. Wenn Sie einen Link auf Ihrer Seite mit einem anderen Stil als die anderen Links benötigen, könnte die Verwendung einer Klasse angebracht sein, aber wenden Sie einen beschreibenderen Klassennamen wie „footer_link“ oder „bold_link“ an. Denken Sie aber daran, dass es mehr Sinn macht, #footer a in Ihrem CSS zu stylen, wenn Sie fünf Links in Ihrer Fußzeile haben, als jedem Link eine Klasse in Ihrem HTML zu geben und den Code zu vermüllen.