Is CSS a Programming Language?

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

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

.container { display: flex; }

.container { display: flex; flex-wrap: wrap; }

// Flex in Servo // https://github.com/servo/servo/blob/master/components/layout/flex.rs fn get_flex_line(&mut self, container_size: Au) -> Option<FlexLine> { … for item in items { let kid = children.get(item.index); item.init_sizes(kid, container_size, self.main_mode); let outer_main_size = item.outer_main_size(kid, self.main_mode); if total_line_size + outer_main_size > container_size && end != start && self.is_wrappable { break; } } … }

.container { display: flex; flex-wrap: wrap; }

.clearfix::before, .clearfix::after { content: “”; display: table; } .clearfix::after { clear: both; }

.relative-parent { position: relative; } .child-stuck-to-bottom-right-of-closest-relative-parent { position: absolute; right: 0; bottom: 0; }

.spaced-content > * + * { margin-top: 1rem; }

h1 { font-size: calc( 2rem + 3vw ); } // Stops growing at 800px @media( min-width: 800px ) { h1 { font-size: calc( 2rem + ( 800px * } } ( 3 / 100 ) ) );

.grid { display: grid; grid-template-columns: repeat( var( —grid-cols, 1 ), 1fr ); } .grid-cols3 { —grid-cols: 3; } .grid-cols4 { —grid-cols: 4; } .grid-item-span2 { grid-column: span 2; }

.relative-parent { position: relative; } .child-stuck-to-bottom… { position: absolute; right: 0; bottom: 0; } .pmc-a-glue-parent { position: relative; } .pmc-a-glue { // Fallback is top left for IE11. top: 0; left: 0; position: absolute; z-index: $z-index-middle-bottom; top: var( —a-glue-top, initial ); bottom: var( —a-glue-bottom, initial ); right: var( —a-glue-right, initial ); left: var( —a-glue-left, initial ); } .pmc-a-glue—r-0 { —a-glue-right: 0; }

.pmc-a-space-children-horizontal > * + * { margin-left: $spacer-050; // Fallback. margin-left: var( —a-space-children-spacer ); } @supports( column-gap: 1rem ) { .space-content > * + * { margin-top: 1rem; } .pmc-a-space-children-horizontal { column-gap: var( —a-space-children-spacer ); } .pmc-a-space-children-horizontal > * { margin-left: unset; } }

.a-story-arc-item-border-decoration { —a-story-arc-item-border-decoration-dot-offset: 1rem; —a-story-arc-item-border-decoration-before-transform: translate(-50%, 50% ); &::before { content: ”; position: absolute; top: 0; left: 0; transform: var( —a-story-arc-item-border-decoration-before-transform ); width: rem(10); height: rem(10); background-color: map-get( $semantic-color-list, brand-red ); border-radius: 50%; box-shadow: 0px 0px 0px 3px map-get( $semantic-color-list, brand-red-light 0px 0px 0px 6px map-get( $semantic-color-list, brand-red-lightest );

div { counter-reset: fizzbuzz; counter-increment: fizzbuzz; } div::before { content: counter(fizzbuzz); } div:nth-child(3n)::before { content: ‘Fizz’; } div:nth-child(5n)::after { content: ‘Buzz’; } Full FizzBuzz in CSS/HTML CodePen