Der CSS-Ansatz...

Gegen Ende letzten Jahres gab es einen lustigen kleinen Trend, bei dem Unternehmen ihre Herangehensweise an CSS veröffentlichten. Die beteiligten Tools, die Methodiken, das Denken und die Daten und Zahlen dahinter. Mark Otto hat ihn, soweit ich das beurteilen kann, ins Rollen gebracht. Ich wollte einfach nur eine Liste davon hier posten, da dies perfektes Futter für CSS-Tricks ist. Ich habe es am Ende in eine Tabelle mit ein paar leicht vergleichbaren Daten gepackt, nur zum Spaß.

Unternehmen Preprocessor Prefixing # Quelldateien # Selektoren Stil-Durchsetzung Notizen

Unternehmen:
Github

Preprocessor:
SCSS

Prefixing:
Benutzerdefinierte @mixins

# Quelldateien
100+

# Selektoren
7,000

Stil-Durchsetzung:
SCSS-lint, styleguide

Notizen:
2 fertige Stylesheets, wegen der IE-Selektorengrenze

 

Unternehmen:
Buffer

Preprocessor:
LESS

Prefixing:
Autoprefixer

# Quelldateien
93

# Selektoren
5328

Stil-Durchsetzung:
LESS lint

Notizen:
2 fertige Stylesheets

 

Unternehmen:
CodePen

Preprocessor:
SCSS

Prefixing:
Autoprefixer

# Quelldateien
171

# Selektoren
1186

Stil-Durchsetzung:
.editorconfig

Notizen:
Asset pipeline

 

Unternehmen:
Ghost

Preprocessor:
SCSS (libsass)

Prefixing:
Autoprefixer

# Quelldateien
36

# Selektoren
1609

Stil-Durchsetzung:
Allgemeine Richtlinien

Notizen:
Open Source

 

Unternehmen:
Groupon

Preprocessor:
Sass (Syntax unklar)

Prefixing:
Compass

# Quelldateien
?

# Selektoren
?

Stil-Durchsetzung:
SMACSS

Notizen:
Toolstrap

 

Unternehmen:
Lonely Planet

Preprocessor:
Sass

Prefixing:
Autoprefixer

# Quelldateien
150+

# Selektoren
1527

Stil-Durchsetzung:
Rizzo, kein Linting

Notizen:
BEM / OOCSS, Normalize.css, SVG-Icons

 

Unternehmen:
Medium

Preprocessor:
LESS

Prefixing:
Benutzerdefinierte @mixins

# Quelldateien
50-100

# Selektoren
?

Stil-Durchsetzung:
Richtlinien

Notizen:
Kein Verschachteln, benutzerdefinierte Methodik für Benennung

 

Unternehmen:
Trello

Preprocessor:
LESS

Prefixing:
Benutzerdefinierte @mixins

# Quelldateien
44

# Selektoren
2,426

Stil-Durchsetzung:
Preprocessor

Notizen:
1 fertiges Stylesheet, Namespacing

Ein weiteres sehr gängiges Thema: Klassenpräfixe .js- zum Trennen von JavaScript- und Styling-Hooks.

Außerdem habe ich versucht, diese Tabelle responsiv zu machen...

Ich wollte, dass sie

• Bei genügend Platz wie eine normale Tabelle aussieht.
• Auf kleinen Bildschirmen zu Blöcken zusammenklappt.
• Auch ohne jegliches CSS funktioniert (E-Mails, RSS)

Hier sind die Ergebnisse

Der Ursprung des Konzepts war, mit "normalen" HTML-Elementen (section, div, p, span) zu beginnen und sie zu zwingen, sich wie eine Tabelle zu verhalten. Ich habe die Dinge etwas anders benannt, aber man könnte einfach Hilfsklassen verwenden.

.table    { display: table }
.tr       { display: table-row }
.thead    { display: table-header-group }
.tbody    { display: table-row-group }
.tfoot    { display: table-footer-group }
.col      { display: table-column }
.colgroup { display: table-column-group }
.td, .th  { display: table-cell }
.caption  { display: table-caption }

Dann, bei einer bestimmten Media Query, zwingt man sie zurück in ihren normalen Zustand.

@media (max-width: 700px) {
.table    { display: block }
.tr       { display: block }
.thead    { display: block }
.tbody    { display: block }
.tfoot    { display: block }
.col      { display: none }
.colgroup { display: none }
.td, .th  { display: inline-block }
.caption  { display: block }
}

Aber das alles ergibt nur wirklich seltsam aussehende Sätze, also habe ich eine Menge <br>-Tags gemischt, um sie nach Bedarf zu beabstanden, die per CSS ausgeblendet werden. Ich habe auch ein <span> verwendet, um jede Zelle zu betiteln, ebenfalls per CSS ausgeblendet, sodass man, wenn kein CSS vorhanden ist, diesen Titel für jeden Datenpunkt sieht.

Das ist redundant und unordentlich. Verschlimmert wird es durch die Notwendigkeit, es in WordPress einzubinden, wo das Auto-p-Verhalten zusätzliche Absätze hinzufügt, auf die man achten muss. Ich habe das Ganze in einem Pen gemacht, dann hier das HTML komprimiert.