Dinge, für die es Spaß machen/nützlich sein könnte, den Universal-Selektor (*) zu verwenden

Paul Irish schrieb kürzlich einen Beitrag über die Verwendung des Universal-Selektors, um border-box box-sizing für alles festzulegen

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

Ich wollte das schon eine Weile ausprobieren und ich bin froh, sagen zu können, dass ich es bereits in einigen Projekten verwendet habe und es fantastisch ist. Es hat mich auch dazu gebracht, darüber nachzudenken, welche anderen Eigenschaften ähnlich nützlich sein könnten, wenn man sie auf alle Elemente der Seite anwendet.

Übergänge

* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}

Wenn du einen Desktop-Browser verwendest, probiere es jetzt gleich aus. Öffne die Entwicklertools deines Browsers und füge eine neue CSS-Regel hinzu. Ich bin zufällig in Chrome, also

Ich habe es gerade im WordPress-Dashboard ausprobiert, wo ich das schreibe, und es macht ziemlich verrückten Spaß, besonders in der Seiten-Navigation. Die Leistung könnte hier sicherlich ein Problem sein, daher befürworte ich die Verwendung im Moment nicht unbedingt, aber es macht Spaß, damit herumzuspielen. Wenn alles auf der Seite einen schnellen und gleichmäßigen Übergang hat, finde ich, dass es sich angenehm, sanft und beruhigend anfühlt.

Nicht wiederholende Hintergründe

Ich wette, im Großen und Ganzen sagst du Hintergründen öfter, sie sollen sich no-repeat verhalten, als dass du sie tatsächlich wiederholen lässt.

* {
  background-repeat: no-repeat;
}

Auf diese Weise kannst du

.logo {
  background-image: url(logo.png);
}

ohne dir Sorgen machen zu müssen, dass das von dir festgelegte Bild sich wiederholt und komisch aussieht, wenn der Container etwas größer als das Logo ist. Und du musst auch nicht die Kurzform für background verwenden, die background-color, background-attachment und background-position festlegt/zurücksetzt, ob du es willst oder nicht.

Ich weiß, Estelle Weyl ist ein Fan. =)

Relative Positionierung

* {
  position: relative;
}

Wenn alles mit relativer Positionierung beginnt, bedeutet das, dass z-index „einfach funktioniert“, anstatt des verwirrenden Problems, bei dem standardmäßig statisch positionierte Elemente es ignorieren. Es bedeutet auch, dass es einfacher ist, Dinge mit top, left, right und bottom zu verschieben, die alle auf relativ positionierten Elementen „einfach funktionieren“. Es mag schwierig sein, dies auf ein bestehendes Layout anzuwenden, aber von Grund auf neu damit zu beginnen, sollte nicht allzu schwer sein.

Mittlere Ausrichtung

* {
  vertical-align: middle;
}

Ich stelle fest, dass ich diesen Wert oft festlege, besonders bei Projekten, die Symbole verwenden. Auf den meisten Layouts, auf denen ich es angewendet habe, hat es nicht viel bewirkt, da es nur wirklich auftritt, wenn Inline- oder Inline-Block-Elemente auf derselben Zeile miteinander ausgerichtet werden. Im Wesentlichen stelle ich fest, dass ich dies öfter festlege, als eine Standardeinstellung zurücksetze, was es meiner Meinung nach zu einem guten Kandidaten für die universelle Festlegung macht.