Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Cascading Style Sheets</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Cascading Style Sheets</h1> </header> <section bg="layout.jpg" id="css-layouts" class="slide cover"><div><h2>CSS-Layouts</h2> <p class="note">Quelle: <a href="https://unsplash.com/photos/vIdRMp8IpO0">Olga Thelavart</a></p> <footer> <ul> <li>Web wurde vor kurzem 30 Jahre alt</li> <li>CSS im Oktober 25</li> <li>Sehen wir uns an, was bisher geschah …</li> </ul> </footer> </div></section> <section class="slide" id="möglichkeiten"><div><h2>Möglichkeiten</h2> <ul> <li>Tabellen (HTML)</li> <li>Table (CSS) <ul> <li><a href="https://colintoh.com/blog/display-table-anti-hero">The Anti-hero of CSS Layout - <code class="language-plaintext highlighter-rouge">display:table</code></a></li> </ul> </li> <li>Float <ul> <li><a href="http://adamkaplan.me/grid/">Bauanleitung für ein responsives Grid</a></li> </ul> </li> <li>Flexbox</li> <li>Grid</li> </ul> <footer> <ul> <li>Tabellen immer noch für E-Mails</li> </ul> </footer> </div></section> <section class="slide" id="float-layout---beispiel"><div><h2>Float Layout - Beispiel</h2> <div class="editor auto hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><header></span> <span class="nt"><code></span><span class="ni">&#60;</span>header<span class="ni">&#62;</span><span class="nt"></code></span> <span class="nt"></header></span> <span class="nt"><section></span> <span class="nt"><code></span><span class="ni">&#60;</span>section<span class="ni">&#62;</span> <span class="nt"><br></span> float: left;<span class="nt"></code></span> <span class="nt"></section></span> <span class="nt"><aside></span> <span class="nt"><code></span><span class="ni">&#60;</span>aside<span class="ni">&#62;</span> <span class="nt"><br></span> float: right;<span class="nt"></code></span> <span class="nt"></aside></span> <span class="nt"><footer></span> <span class="nt"><code></span><span class="ni">&#60;</span>footer<span class="ni">&#62;</span><span class="nt"></code></span> <span class="nt"></footer></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">code</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="m">14px</span><span class="p">/</span><span class="m">24px</span> <span class="s2">'Anka Coder'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">24px</span> <span class="m">15px</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span><span class="o">,</span> <span class="nt">section</span><span class="o">,</span> <span class="nt">aside</span><span class="o">,</span> <span class="nt">footer</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">1.5%</span> <span class="m">24px</span> <span class="m">1.5%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">63%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">aside</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">30%</span><span class="p">;</span> <span class="p">}</span> <span class="nt">footer</span> <span class="p">{</span> <span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p class="note">Quelle: <a href="http://codepen.io/shayhowe/pen/utfmw">Shay Howe</a></p> <footer> <ul> <li>CSS nie für Layouts gedacht, darum so schwer und verhackst</li> <li>Erst Neuerungen wie <code class="language-plaintext highlighter-rouge">flexbox</code> bieten ordentliche Möglichkeiten</li> </ul> </footer> </div></section> <section class="slide" id="flexbox"><div><h2>Flexbox</h2> <ul> <li>Erster ordentlicher Layout-Mechanismus in CSS</li> <li>Kümmert sich dynamisch um Layout, Anordnung und Verteilung</li> <li>Elemente werden in Höhe und Breite verändert, um vorhandenen Raum bestmöglich zu nutzen</li> <li>Mehr unter <ul> <li><a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/">An Interactive Guide to Flexbox</a> ✨</li> <li><a href="http://philipwalton.github.io/solved-by-flexbox/">Solved by Flexbox</a></li> <li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a></li> <li><a href="http://the-echoplex.net/flexyboxes/">Flexy Boxes: flexbox playground and code generator</a></li> <li><a href="http://jonibologna.com/flexbox-cheatsheet/">Flexbox Cheatsheet Cheatsheet</a></li> </ul> </li> </ul> </div></section> <section class="slide" id="flexbox--zentrierung"><div><h2>Flexbox – Zentrierung</h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"zentrum"</span><span class="nt">><p></span>Look ma, no hands!<span class="nt"></p></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.zentrum</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="no">gold</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="flexbox--gleich-große-boxen"><div><h2>Flexbox – gleich große Boxen</h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><main></span> <span class="nt"><section></span> C<span class="nt"><br></span>O<span class="nt"><br></span>N<span class="nt"><br></span>T<span class="nt"><br></span>E<span class="nt"><br></span>N<span class="nt"><br></span>T <span class="nt"></section></span> <span class="nt"><aside></span> Werbung <span class="nt"></aside></span> <span class="nt"></main></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">main</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="p">{</span> <span class="nl">flex-grow</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="p">}</span> <span class="nt">aside</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">20vw</span><span class="p">;</span> <span class="nl">flex-shrink</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="no">hotpink</span><span class="p">;</span> <span class="p">}</span> <span class="nt">main</span> <span class="o">></span> <span class="o">*</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">flex-shrink</code>: Verhindert, dass Box zusammenfällt, wenn leer</li> </ul> </footer> </div></section> <section class="slide" id="flexbox--holy-grail-layout"><div><h2>Flexbox – Holy Grail Layout</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><header></span>Header<span class="nt"></header></span> <span class="nt"><main></span> <span class="nt"><nav></span>Nav<span class="nt"></nav></span> <span class="nt"><section></span>Content<span class="nt"></section></span> <span class="nt"><aside></span>Ads<span class="nt"></aside></span> <span class="nt"></main></span> <span class="nt"><footer></span>Footer<span class="nt"></footer></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">main</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">flex-direction</span><span class="p">:</span> <span class="n">row</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span> <span class="m">15em</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">1em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">nav</span><span class="o">,</span> <span class="nt">aside</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">3em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span><span class="o">,</span> <span class="nt">footer</span><span class="o">,</span> <span class="nt">main</span> <span class="o">></span> <span class="o">*</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="m">14px</span><span class="p">/</span><span class="m">1.5</span> <span class="s2">'Anka Coder'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <p>Beispiel: <code class="language-plaintext highlighter-rouge">flex-direction: row;</code> → <code class="language-plaintext highlighter-rouge">column</code></p> </footer> </div></section> <section class="slide" id="css-grid-layout-"><div><h2>CSS Grid Layout 🆕</h2> <ul> <li>Zweiter ordentlicher Layout-Mechanismus in CSS</li> <li>Kümmert sich dynamisch um Anordnung und PLatzverteilung</li> <li>Mehr unter <ul> <li><a href="https://gridbyexample.com/">Grid by Example</a></li> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">A Complete Guide to Grid</a></li> </ul> </li> </ul> </div></section> <section class="slide" id="css-grid-layout---holy-grail"><div><h2>CSS Grid Layout - Holy Grail</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><main></span> <span class="nt"><header></span>Header<span class="nt"></header></span> <span class="nt"><section></span>Content<span class="nt"></section></span> <span class="nt"><nav></span>Nav<span class="nt"></nav></span> <span class="nt"><aside></span>Ads<span class="nt"></aside></span> <span class="nt"><footer></span>Footer<span class="nt"></footer></span> <span class="nt"></main></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">main</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> <span class="py">grid-gap</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="py">grid-template-areas</span><span class="p">:</span> <span class="s1">"header header header"</span> <span class="s1">"nav main ads"</span> <span class="s1">"footer footer footer"</span><span class="p">;</span> <span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">5rem</span> <span class="m">1</span><span class="n">fr</span> <span class="m">5rem</span><span class="p">;</span> <span class="py">grid-template-rows</span><span class="p">:</span> <span class="m">3em</span> <span class="m">1</span><span class="n">fr</span> <span class="m">3em</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">header</span><span class="p">;</span> <span class="p">}</span> <span class="nt">footer</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">footer</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">main</span><span class="p">;</span> <span class="p">}</span> <span class="nt">nav</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">nav</span><span class="p">;</span> <span class="p">}</span> <span class="nt">aside</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">ads</span><span class="p">;</span> <span class="p">}</span> <span class="nt">main</span> <span class="o">></span> <span class="o">*</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="m">14px</span><span class="p">/</span><span class="m">1.5</span> <span class="s2">'Anka Coder'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="css-grid-layout---collapsed"><div><h2>CSS Grid Layout - Collapsed</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><main></span> <span class="nt"><header></span>Header<span class="nt"></header></span> <span class="nt"><section></span>Content<span class="nt"></section></span> <span class="nt"><nav></span>Nav<span class="nt"></nav></span> <span class="nt"><aside></span>Ads<span class="nt"></aside></span> <span class="nt"><footer></span>Footer<span class="nt"></footer></span> <span class="nt"></main></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">main</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> <span class="py">grid-gap</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="py">grid-template-areas</span><span class="p">:</span> <span class="s1">"header"</span> <span class="s1">"nav"</span> <span class="s1">"main"</span> <span class="s1">"ads"</span> <span class="s1">"footer"</span><span class="p">;</span> <span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span> <span class="py">grid-template-rows</span><span class="p">:</span> <span class="m">3em</span> <span class="m">3em</span> <span class="m">1</span><span class="n">fr</span> <span class="m">3em</span> <span class="m">3em</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span> <span class="m">400px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">header</span><span class="p">;</span> <span class="p">}</span> <span class="nt">footer</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">footer</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">main</span><span class="p">;</span> <span class="p">}</span> <span class="nt">nav</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">nav</span><span class="p">;</span> <span class="p">}</span> <span class="nt">aside</span> <span class="p">{</span> <span class="py">grid-area</span><span class="p">:</span> <span class="n">ads</span><span class="p">;</span> <span class="p">}</span> <span class="nt">main</span> <span class="o">></span> <span class="o">*</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="m">14px</span><span class="p">/</span><span class="m">1.5</span> <span class="s2">'Anka Coder'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide shout" id="praxis"><div><h2>Praxis</h2> </div></section> <section class="slide" id="browser-default-styles"><div><h2>Browser Default Styles</h2> <div class="parts "> <div class="part"> <h3 id="default-style-sheets">Default Style Sheets</h3> <ul> <li><a href="https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/css/html.css">Chromium</a> (Google Chrome)</li> <li><a href="https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css">Firefox</a></li> <li><a href="http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css">Safari</a></li> </ul> </div><div class="part"> <h3 id="nivellierungs-ansätze">Nivellierungs-Ansätze</h3> <ul> <li>Normalisierung: <a href="https://github.com/necolas/normalize.css/">Normalize.css</a></li> <li><q>Korrektur</q>: <a href="https://github.com/jonathantneal/sanitize.css">sanitize.css</a></li> <li>Reset: <a href="https://github.com/murtaugh/HTML5-Reset">HTML5-Reset</a></li> <li><a href="https://getbootstrap.com/docs/4.0/content/reboot/">Reboot</a> (normalize + opinions)</li> </ul> </div> </div> <ul> <li><a href="https://css-tricks.com/reboot-resets-reasoning/">kleine Geschichte der CSS-Resets</a></li> </ul> <footer> <ul> <li>Alle Browser bringen eine Basis-CSS-Datei mit</li> <li>Verschiedene Ansätze um Inkonsistenzen auszugleichen</li> <li>Geschichte: Reset (alles weg), Normalisierung (alles auf ok), Korrektur (rein was fehlt)</li> <li><code class="language-plaintext highlighter-rouge">pre</code> auch nur normales Element mit <code class="language-plaintext highlighter-rouge">{ font-family: monospace; white-space: pre; }</code> (<a href="data:text/html,<pre>">Beispiel</a>)</li> </ul> </footer> </div></section> <section class="slide" id="frameworks"><div><h2>Frameworks</h2> <table> <tbody> <tr> <td><a href="https://getbootstrap.com/">Bootstrap</a></td> <td>171k ⭐️</td> </tr> <tr> <td><a href="https://www.material-ui.com/">Material-UI</a></td> <td>94k ⭐️</td> </tr> <tr> <td><a href="https://tailwindcss.com/">Tailwind</a></td> <td>83k ⭐️</td> </tr> </tbody> </table> <p><a href="https://get.foundation/">Foundation</a>, <a href="https://bulma.io/">Bulma</a>, Yahoo <a href="https://purecss.io">Pure.css</a>, GitHub <a href="https://primer.style/">Primer</a>, <a href="https://milligram.io/">Milligram</a> <a href="https://tachyons.io/">Tachyons</a>, <a href="https://getuikit.com/">UIkit</a>, <a href="http://concisecss.com/">Concise</a>, <a href="https://maxbeier.github.io/tawian-frontend/">Tawian</a></p> <footer> <p>Frameworks bieten eine Basis und ermöglichen es, mit deutlich geringerem Aufwand ansehnliche, funktionale Seiten zu bauen</p> <ul> <li>typographische Defaults</li> <li>responsiv Grids,</li> <li> <p>Komponenten</p> </li> <li>Basis von Seiten jeglicher Größe: Rundfunkbeitrag.de, WG-Gesucht.de, NBA.com, Indeed.com, Walmart, target.com, Bloomberg Business</li> </ul> </footer> </div></section> <section class="slide" id="probleme-mit-css"><div><h2>Probleme mit CSS</h2> <ul> <li>Global Namespace / kein Scoping → führt leicht zu Kollisionen / Regressionen <ul> <li>Style bleeding (durch Kaskadierung)</li> <li>Spezifitäts-Kämpfe (<code class="language-plaintext highlighter-rouge">.center.center</code> → <code class="language-plaintext highlighter-rouge">!important</code>)</li> </ul> </li> <li>Implizite Abhängigkeiten <ul> <li>kein <q>bidirektionales Mapping</q> / kein Dependency Graph</li> <li>schlechtere Wartbarkeit</li> <li><q>append only</q> Stylesheets (kein ändern / löschen von vorhandenen Regeln) → stetig wachsende Dateigröße</li> </ul> </li> <li>meist doch eine starke Kopplung zwischen CSS und HTML</li> </ul> <footer> <ul> <li>Kollisionen werden zu machtkämpfen, bis einer die <code class="language-plaintext highlighter-rouge">!important</code>-Karte zieht und alles furchtbar wird</li> <li>Regressionen auf großen Seiten schwer zu bemerken</li> <li><q>append only</q> -> keine dead code elemination</li> <li>weitere Punkte: <ul> <li>keine echten File-Imports</li> <li>spezifität: regeln gleicher stärke gewinnen nach ort in datei, bei imports schwer vorherzusagen</li> <li><q>Semantisches CSS</q> ist in echten Projekten eine Illusion</li> <li>CSS orientiert sich stark an konkretem HTML und dessen Struktur</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="css-präprozessoren"><div><h2>CSS-Präprozessoren</h2> <ul> <li>Stylesheet-Sprachen, die neue Spracheigenschaften ermöglichen und zu CSS kompilieren</li> <li>vereinfachen Erstellung und Pflege von Stylesheets</li> <li>Vertreter: <a href="https://sass-lang.com/">Sass</a> … <a href="http://lesscss.org/">Less</a>, <a href="https://stylus-lang.com/">Stylus</a></li> </ul> <pre class="highlight language-scss" data-lang="scss"><code><span class="nv">$primary</span><span class="p">:</span> <span class="mh">#00f</span><span class="p">;</span> <span class="nc">.button</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="n">grey</span><span class="p">;</span> <span class="k">&</span><span class="nc">.primary</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span> <span class="p">}</span> <span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="nf">lighten</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="m">10%</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.icon</span> <span class="p">{</span> <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> <footer> <ul> <li><q>und weißt du keine lösung mehr, nimm einen kompiler her</q></li> <li>einige probleme in der sprache lassen sich nicht in der sprache lösung, weshalb über-sprachen entwickelt wurden, am erfolgreichsten davon war Sass mit der Geschmacksrichtung <code class="language-plaintext highlighter-rouge">.scss</code></li> <li>Sass nimmt scss, vorverarbeitet es und emittiert valides CSS</li> <li>vor allem Anfang der 10er-Jahre populär</li> <li>Sass führte echte Imports, Nesting, Variablen, Schleifen, Mixins, Partials und <q>Vererbung</q> ein</li> <li>Variablen mittlerweile natives CSS-Feature</li> <li>Sass machte das Erstellen von CSS viel leichter und auch das Verteilen von Code auf mehrere Dateien</li> <li>aber z.B. verschachtelte Selektoren (als Heilmittel gegen Spezifitäts-Probleme) führten leicht versehentlich zu riesigen CSS-Dateien</li> <li>insgesamt war Sass nett, aber löst die grundlegenden Probleme nicht</li> </ul> </footer> </div></section> <section class="slide" id="benennungsschemata"><div><h2>Benennungsschemata</h2> <ul> <li>Methode zur Vermeidung von Problemen mit CSS durch Einhaltung von Namenskonventionen</li> <li>Ziele: höhere Entwicklungsgeschwindigkeit, Skalierbarkeit, Effizienz, Wartbarkeit, Lesbarkeit <small>(wie immer also)</small></li> <li><a href="http://getbem.com/introduction/">BEM</a> – Block, Element, Modifier <pre class="highlight language-css" data-lang="css"><code> <span class="nc">.product__cta</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#D5D5D5</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.product__cta--state-success</span> <span class="p">{</span> <span class="nl">border-color</span><span class="p">:</span> <span class="m">#4A993E</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.product__cta--state-danger</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#900</span><span class="p">;</span> <span class="p">}</span> </code></pre></li> <li><a href="https://github.com/stubbornella/oocss/wiki">OOCSS</a> – objektorientiertes CSS</li> </ul> <footer> <ul> <li>BEM <ul> <li>kam Anfang der 10er-Jahre auf</li> <li>Versuch einer modularen oder komponentenbasierten Denkweise und dadurch Wiederverwendbarkeit</li> <li>Komponentennamen sollen uniqe sein, was Kollisionen vermeidet</li> <li>Regeln wie flache Selektor-Hierarchie / geringes Nesting führten zu weniger Problemen mit Spezifität</li> <li>Führt quasi Konzept der <q>Namespaces</q> in CSS ein</li> <li>Blöcke sind quasi Komponenten, Elemente Teile davon und Modifier die verschiedenen Ausprägungsvarianten</li> </ul> </li> <li>OOCSS <ul> <li>kam zur selben Zeit auf</li> <li>Methode ist Anwendung von OO-Prinzipien aus Programmierung auf CSS</li> <li>Prinzipien: <ul> <li>Trennung zwichen Struktur / Layout (Box-Model-Eigenschaften) und Oberfläche / Look (Farben etc)</li> <li>Trenung zwischen Container und Inhalten</li> </ul> </li> </ul> </li> <li>Probleme (eher sozial) <ul> <li>Klassnnamen manuell auszuwählen ist anstrengend und fehleranfällig, aber einzige Möglichkeit, künstlich lokale Scopes zu erzeugen</li> <li>Markup wird durch lange Klassennamen größer und für Menschen schwerer lesbar</li> <li>angeblich mehr Wiederverwendbarkeit, aber in der Wirklichkeit nicht wirklich (entweder: konkrete Benennung → keine Wiederverwendbarkeit, nur Extension möglich; oder: abstrakte Benennung → zu unkonkret)</li> <li>Unterwerfung des Menschen unter die Maschine, wir torquieren uns dass es fast masochistisch wirkt, um Überlappung von Styles zu vermeiden</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="utility-css"><div><h2>Utility CSS</h2> <ul> <li>oder <q>Atomic CSS</q> oder <q>Functional CSS</q></li> <li>Das Problem ist das Verhältnis zwischen HTML und CSS</li> <li>häufig gibt HTML Klassen vor, die in CSS implementiert werden (<q>semantisch</q>)</li> <li><q>Utility CSS</q>-Methode: CSS gibt Klassen vor, die das HTML benutzen kann (<q>unsemantisch</q>, nur nach ihrer visuellen Funktion benannt)</li> <li>jede Klasse enthält quasi nur noch eine Deklaration</li> <li>dadurch sehr <q>composable</q> und nur noch wenig eigene Styles nötig</li> <li>z.B. <a href="https://tailwindcss.com">Tailwind</a> ✨ und <a href="https://tachyons.io">Tachyons</a></li> </ul> <footer> <ul> <li>kam Mitte der 10er-Jahre auf, wirklich populär wurde es in den letzten 1-3 Jahren</li> <li>Problem <ul> <li>Entweder das HTML ist <q>frei</q> und CSS muss sich an die verwendeten Klassen halten (<code class="language-plaintext highlighter-rouge">.product</code> etc)</li> <li>oder das CSS ist frei und das HTML muss sich an die verfügbaren Klassen halten</li> </ul> </li> <li>utility css: Immutability! <ul> <li><q>immutable</q> css-klassen</li> <li>keine angst vor änderungen im CSS, weil CSS wird nicht mehr geändert, nur das HTML</li> <li>Effekt ist also: resusable CSS, aber dafür kein restylable HTML (was quasi eh nicht passiert)</li> </ul> </li> <li>Vergleich inline styles <ul> <li>ja, ist fast wie inline styles, aber immer noch mehr <q>contraint</q> als diese – also keine <q>magischen zahlen</q> möglich</li> <li>immer noch abstrahiert (<code class="language-plaintext highlighter-rouge">blue-500</code> statt <code class="language-plaintext highlighter-rouge">#00f</code>)</li> <li>media queries / pseudo-klassen inline nicht verfügbar</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <blockquote> <p>There are only two hard things in Computer Science: cache invalidation and naming things. – Phil Karlton</p> </blockquote> <ul> <li><a href="https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard">Naming CSS Stuff Is Really Hard</a></li> <li><a href="https://codepen.io/hidanielle/post/css-methodologies-naming-conventions-and-file-structures">An introduction to CSS Methodologies: Naming Conventions and File Structures</a> (BEM, OOCSS, SMACSS, ITCSS)</li> <li><a href="https://www.sitepoint.com/bem-smacss-advice-from-developers/">BEM and SMACSS: Advice From Developers Who’ve Been There</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>