Umfrageergebnisse: Wie ordnen Sie Ihre CSS Eigenschaften an?

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Über 10.000 Menschen haben gesprochen: Der beliebteste Weg, CSS-Eigenschaften anzuordnen, ist gruppiert nach Typ.

So verteilten sich die Stimmen

Gruppiert nach Typ (45%) gefolgt von Zufällig (39%). Deutlich weniger beliebt war Alphabetisch (14%) und nur wenige Leute nutzten Zeilenlänge (2%).

Zur Klarstellung, Gruppiert nach Typ würde so aussehen (stark angelehnt an Nicolas Gallaghers Idiomatic CSS)

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

Es wäre wahrscheinlich nicht explizit mit solchen Kommentaren gekennzeichnet, aber die Eigenschaften wären nebeneinander.

Die Mehrheit der Leute ist organisierter als ich! Ich musste bedauerlicherweise für „Zufällig (kein spezifischer Plan)“ stimmen. Ich habe nicht das Gefühl, dass es mich stark behindert, aber andererseits, woher wüsste ich, ob ich nicht einen organisierteren Ansatz ausprobiere?

Ich habe noch ein paar andere Gedanken.

Ich denke, das ist in Teams ein größeres Problem. Es muss einen Standard geben, sonst sieht das CSS projektweit unordentlich aus. Ich weiß, dass inkonsistente Stile meinem Gewissen zu schaffen machen würden und ich würde Zeit damit verbringen, triviale Formatierungsarbeiten zu beheben, anstatt tatsächliche Arbeit zu leisten.

Die kognitive Belastung spielt hier eine Rolle. Wenn man sich darauf verlassen kann, dass bestimmte Eigenschaften immer an der gleichen Stelle sind, kann man das CSS schneller verstehen (weniger scannen). Wiederum ein größeres Problem, wenn man in einem Team arbeitet und Code betrachtet, der einem leicht unbekannt ist, weil man ihn nicht geschrieben hat.

Eine weitere Überlegung ist „wie Sie es ursprünglich schreiben“ CSS und „nach ein paar Monaten“ CSS. Ich wette, viele von uns beginnen mit der Absicht, sehr organisiert zu sein und sind auch tatsächlich organisiert, aber dann, wenn man später Dinge anpasst, wirft man Eigenschaften irgendwohin. Wie hat sich das auf die Abstimmung ausgewirkt? Haben Sie basierend auf Ihren Absichten oder Ihren tatsächlichen CSS-Dateien abgestimmt?