Algorithms in CSS v3.1.0

What is A Programming Language? By Will Chrichton

Link to the Tweet.

Wikipedia

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; }

.square { width: 100px; height: 100px; background-color: blue; } .square—bigger { width: 150px; height: 150px; } .square—smaller { width: 50px; height: 50px; }

.square { width: 100px; height: 100px; background-color: blue; }

.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; }

.square { … } .square—bigger { —square-size: 150px; } .square—smaller { —square-size: 50px; } .square—rounded { border-radius: 50%; }

.square { … } .square—bigger { —square-size: 150px; } .square—rounded { border-radius: 50%; } .square—yellow { background-color: yellow; }

.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 { … }

.shape { … } .shape—big-square { —shape-height: 150px; —shape-width: 150px; } .shape—small-square { —shape-height: 50px; —shape-width: 50px; } .shape—yellow { … } .shape—rounded { … }

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { … } .shape—rectangle { —shape-height: 50px; —shape-width: 100px; }

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—rounded { border-radius: 50%; } .shape—rectangle { … }

.shape { … } .shape—big-square { … } .shape—small-square { … } .shape—yellow { … } .shape—circle { border-radius: 50%; } .shape—rounded { border-radius: 20px; } .shape—rectangle { … }

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; }

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; }

Robert C. Martin in The Future of Programming

Immutable CSS on CSS Wizardry

.square { width: 100px; height: 100px; background-color: blue; }

.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; }

.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; }

.square { width: 100px; height: 100px; background-color: blue; }

.square { width: 100px; height: 100px; } .u-background-blue { background-color: blue; }

.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