Meine Best Practices für Java- & Webentwicklung

Meine Best Practices – CSS

1. Vorwort

CSS wird heutzutage under-utilitzed. Es gibt eine Kluft zwischen Angular/React/Vue/...-Entwickler und UI-Designer.

Der UI-Designer verschachtelt dreißig <div> und hat vierzig CSS-Klassen drauf, während der Angular-Dev sich alle 2 Wochen an der neuesten Lib aufgeilt, während seine Depdendency Hell schon längst nicht mehr ohne npm i --force baut, weil die Peer-Dependencies im Konflikt stehen. CSS und HTML interessiert den TypeScript-Fanatiker wenig. Für einfachste Inputs muss er Material verwenden, den er hat Angst, dass er sonst die Validierung nicht hinbekommt. Und schon gar nicht will man Zeit verlieren, in dem man das Rad neu erfindet. Dass man bei der ersten Anforderung, die die Library nicht abdeckt dann die ganze Zeit wieder verliert und sich beim Lesen von GitHub-Issues der Lib wiederfindet, ist ihm nicht klar.

Als Entwickler im Fullstack-Projekt hat man selten die Möglichkeit, seine Kentnisse als Frontend-Designer auszuleben. Man bekommt die Screenmocks im Figma und muss es genau so umsetzen. Die meisten Frontendentwickler dieser Art sind sich gar nicht bewusst, dass man schon mit einer einzigen Zeile CSS ein responsive Layout hinbekommt. CSS ist stärker als je zuvor. Vorbei die Zeiten der JS-Style-Hacks, der zahlreichen media-queries und IE 8-Workarounds. Hurray!

2. Super Centered

Nicht immer gut angekommen beim Interview, aber ich hab es gefeiert: Die Frage, ob man gut im Frontend ist, habe ich gerne mit “Oh ja. Ich kann ein <div> vertikal zentrieren.” beantwortet.

It is notoriously difficult to center a div.

Jetzt nicht mehr:

.parent {
    display: grid;
    place-items: center
}

3. Responsive Grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive Flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Page Layout

Header

Main

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Sidebar

Min: 150px / Max: 25%

This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space.

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Credits

https://1linelayouts.glitch.me/