A presentation at CSS Day in in Amsterdam, Netherlands by Lara Schenck
What is A Programming Language? By Will Chrichton
Link to the Tweet.
Link to the Tweet.
Wikipedia
WolframMathWorld
WolframMathWorld
WolframMathWorld
WolframMathWorld
if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) { cellFour = 1; } input:checked + input:not(:checked) + input:not(:checked) + * { /* Style fourth cell to prompt human to change state */ }
Rule 110 in CSS/HTML/Human
Accidentally Turing Complete by Andreas Zwinkau
.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.square { width: 100px; height: 100px; background-color: blue; } .square—bigger { width: 150px; height: 150px; } .square—smaller { width: 50px; height: 50px; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div>.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; }
<div class=”box”></div> class=”square”></div>.square { —square-size: 100px; width: var( —square-size ); height: var( —square-size ); background-color: blue; } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div>.square { … } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; } .square—rounded { border-radius: 50%; }
<div class=”square”></div> <div class=”square square—bigger”></div> <div class=”square square—smaller”></div> <div class=”square square—smaller square—rounded”></div>.square { … } .square—bigger { —square-size: 150px; } .square—rounded { border-radius: 50%; } .square—yellow { background-color: yellow; }
<div class=”square”></div> <div class=”square square—rounded square—bigger square—yellow”></div>.square { —square-size: 100px; —square-bg-color: blue; …
<div class=”square”></div> <div class=”square square—rounded square—yellow”></div> background-color: var( —square-bg-color ); } .square—bigger { … } .square—rounded { … } .square—yellow { —square-bg-color: yellow; }.square { —square-size: 100px; —square-bg-color: blue;
<div class=”square”></div> width: var( —square-size ); height: var( —square-size ); background-color: var( —square-bg-color ); }.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;
<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }.shape { … } .shape—bigger { —shape-height: 150px; —shape-width: 150px; } .shape—smaller { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }
<div class=”shape”></div> <div class=”shape shape—bigger”></div> <div class=”shape shape—smaller”></div> <div class=”shape shape—rounded shape—bigger shape—yellow”></div>.shape { … } .shape—big-square { —shape-height: 150px; —shape-width: 150px; } .shape—small-square { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—rounded shape—big-square shape—yellow”></div>.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—rectangle { —shape-height: 50px; —shape-width: 100px; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—rounded shape—big-square shape—yellow”></div> <div class=”shape shape—rectangle”></div>.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { border-radius: 50%; } .shape—rectangle { … }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—rounded shape—big-square shape—yellow”></div> <div class=”shape shape—rectangle”></div>.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—circle { border-radius: 50%; } .shape—rounded { border-radius: 20px; } .shape—rectangle { … }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rectangle shape—rounded”></div>Sign Up For Our Newsletter
.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rounded-rectangle”></div> <button class=”shape shape—has-text”> <a href=”” class=”shape__text”></a> </button>Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter
.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—rounded-rectangle { … } .shape—yellow { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rounded-rectangle”></div> <button class=”shape shape—has-text”> <a href=”” class=”shape__text”></a> </button>Robert C. Martin in The Future of Programming
Immutable CSS on CSS Wizardry
.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.shape { —shape-height: 100px; —shape-width: 100px; —shape-bg-color: blue;
<div class=”shape”></div> width: var( —shape-width ); height: var( —shape-height ); background-color: var( —shape-bg-color ); }What is Programming Anyway? by Felienne
.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.shape { … } .shape__text { color: white; font-size: 16px; } .shape—big-square { … } .shape—small-square { … } .shape—rectangle { … } .shape—yellow { … } .shape—circle { … } .shape—has-text { —shape-height: initial; —shape-width: initial; }
<div class=”shape”></div> <div class=”shape shape—big-square”></div> <div class=”shape shape—small-square”></div <div class=”shape shape—circle shape—big-square shape—yellow”></div> <div class=”shape shape—rounded-rectangle”></div> <button class=”shape shape—has-text”> <a href=”” class=”shape__text”></a> </button>.square { width: 100px; height: 100px; background-color: blue; }
<div class=”square”></div>.square { width: 100px; height: 100px; } .u-background-blue { background-color: blue; }
<div class=”square”></div> <div class=”square square—smaller u-background-blue”></div>function sort(array) { for (let i = 0; i < array.length; i++) { for (let ii = 0; ii < array.length; ii++) { if (array[ii] > array[ii+1]) { let temp = array[ii]; array[ii] = array[ii+1]; array[ii+1] = temp; } } } return array; } var sorted = sort([4, 2, 1, 3]);
.container { display: flex; }
.container { display: flex; }
.a-scale-for-header-leaderboard-ad { @media ( min-width: 767px ) and ( max-width: 970px ) and display: flex; justify-content: center; transform: scale( 0.76 ); // Accommodate 970px ads on } }
.clearfix::before, .clearfix::after { content: “”; display: table; } .clearfix::after { clear: both; }
.arrow-up { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid red; }
Designgineering Chronicles
div { counter-reset: fizzbuzz; counter-increment: fizzbuzz; } div::before { content: counter(fizzbuzz); } div:nth-child(3n)::before { content: ‘Fizz’; } div:nth-child(3n)::after { content: ”; } div:nth-child(15n)::after { content: ‘Buzz’; } FizzBuzz in CSS/HTML CodePen
CSS can be a source of deep frustration for developers, especially those more familiar with the imperative nature of JavaScript. Over time, this has resulted in a portion of the web community with a fundamental misunderstanding of CSS, not only of how to write it, but of what CSS is in the first place: a declarative, domain-specific programming language.
How can those of us who know and love CSS convince this group to include CSS in their definition of programming language, and why is it so important? This talk will provide your talking points for that conversation.
The following resources were mentioned during the presentation or are useful additional information.
Blog post list of resources for learning how a browser works and about Computer Science.
Here’s what was said about this presentation on social media.
for free. You
can too.