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.

8. What is A Programming Language? By Will Chrichton

13. Link to the Tweet.

14. Link to the Tweet.

49. Wikipedia

52. WolframMathWorld

53. WolframMathWorld

54. WolframMathWorld

55. WolframMathWorld

56. input:checked + input:not(:checked) + input:not(:checked) + * {
/* Style fourth cell to prompt human to change state */
}
if ( cellOne == 1 && cellTwo == 0 && cellThree == 0 ) {
cellFour = 1;
}

57. Rule 110 in CSS/HTML/Human

59. Accidentally Turing Complete by Andreas Zwinkau

69. .square {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="square"></div>

70. <div class="square"></div>
.square--bigger {
width: 150px;
height: 150px;
}
.square--smaller {
width: 50px;
height: 50px;
}
<div class="square square--bigger"></div>
<div class="square square--smaller"></div>
.square {
width: 100px;
height: 100px;
background-color: blue;
}

71. <div class="square"></div>.square {
width: 100px;
height: 100px;
background-color: blue;
}

72. <div class="box"></div>.square {
--square-size: 100px;
width: var( --square-size );
height: var( --square-size );
background-color: blue;
}
<div class="square"></div>

73. .square--smaller {
--square-size: 50px;
}
.square--bigger {
--square-size: 150px;
}
<div class="square"></div>
<div class="square square--bigger"></div>
<div class="square square--smaller"></div>
.square {
--square-size: 100px;
width: var( --square-size );
height: var( --square-size );
background-color: blue;
}

75. .square {
...
}
<div class="square"></div>
.square--smaller {
--square-size: 50px;
}
.square--bigger {
--square-size: 150px;
}
<div class="square square--bigger"></div>
<div class="square
square--smaller
square--rounded"></div>
<div class="square square--smaller"></div>
.square--rounded {
border-radius: 50%;
}

77. .square--rounded {
border-radius: 50%;
}
.square {
...
}
<div class="square"></div>
<div class="square
square--rounded
square--bigger
square--yellow"></div>
.square--yellow {
background-color: yellow;
}
.square--bigger {
--square-size: 150px;
}

78. .square {
--square-size: 100px;
--square-bg-color: blue;
...
background-color: var( --square-bg-color );
}
.square--yellow {
--square-bg-color: yellow;
}
<div class="square"></div>
<div class="square
square--rounded
square--yellow"></div>
.square--rounded { ... }
.square--bigger { ... }

80. <div class="square"></div>.square {
--square-size: 100px;
--square-bg-color: blue;
width: var( --square-size );
height: var( --square-size );
background-color: var( --square-bg-color );
}

81. <div class="shape"></div>.shape {
--shape-height: 100px;
--shape-width: 100px;
--shape-bg-color: blue;
width: var( --shape-width );
height: var( --shape-height );
background-color: var( --shape-bg-color );
}

82. .shape { ... }
.shape--smaller {
--shape-height: 50px;
--shape-width: 50px;
}
.shape--bigger {
--shape-height: 150px;
--shape-width: 150px;
}
<div class="shape shape--bigger"></div>
<div class="shape shape--smaller"></div>
<div class="shape
shape--rounded
shape--bigger
shape--yellow"></div>
.shape--yellow { ... }
.shape--rounded { ... }
<div class="shape"></div>

83. <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--small-square {
--shape-height: 50px;
--shape-width: 50px;
}
.shape--big-square {
--shape-height: 150px;
--shape-width: 150px;
}
.shape--yellow { ... }
.shape--rounded { ... }
<div class="shape"></div>

84. .shape--small-square { ... }
<div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
.shape--rectangle {
--shape-height: 50px;
--shape-width: 100px;
}
<div class="shape shape--rectangle"></div>
<div class="shape
shape--rounded
shape--big-square
shape--yellow"></div>
.shape--yellow { ... }
.shape--rounded { ... }
.shape { ... }
.shape--big-square { ... }
<div class="shape"></div>

86. .shape--rounded {
border-radius: 50%;
}
<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>
<div class="shape"></div>
.shape--small-square { ... }
.shape--rectangle { ... }
.shape--yellow { ... }
.shape { ... }
.shape--big-square { ... }

87. <div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
<div class="shape
shape--rectangle
shape--rounded"></div>
<div class="shape
shape--circle
shape--big-square
shape--yellow"></div>
.shape--rounded {
border-radius: 20px;
}
.shape--circle {
border-radius: 50%;
}
.shape--rectangle { ... }
<div class="shape"></div>
.shape--small-square { ... }
.shape--yellow { ... }
.shape { ... }
.shape--big-square { ... }

88. Sign Up For Our Newsletter

89. <div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
.shape { ... }
.shape--small-square { ... }
.shape--big-square { ... }
.shape--yellow { ... }
.shape--circle { ... }
.shape--rounded { ... }
<div class="shape
shape--rounded-rectangle"></div>
<div class="shape
shape--circle
shape--big-square
shape--yellow"></div>
<div class="shape"></div>
.shape--has-text {
--shape-height: initial;
--shape-width: initial;
}
.shape__text {
color: white;
font-size: 16px;
}
<button class="shape shape--has-text">
<a href="" class="shape__text"></a>
</button>

90. Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter

91. <div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
.shape { ... }
.shape--small-square { ... }
.shape--big-square { ... }
.shape--yellow { ... }
.shape--circle { ... }
.shape--rounded-rectangle { ... }
<div class="shape
shape--rounded-rectangle"></div>
<div class="shape
shape--circle
shape--big-square
shape--yellow"></div>
<div class="shape"></div>
.shape--has-text {
--shape-height: initial;
--shape-width: initial;
}
.shape__text {
color: white;
font-size: 16px;
}
<button class="shape shape--has-text">
<a href="" class="shape__text"></a>
</button>

98. Robert C. Martin in The Future of Programming

102. Immutable CSS on CSS Wizardry

104. .square {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="square"></div>

105. <div class="shape"></div>.shape {
--shape-height: 100px;
--shape-width: 100px;
--shape-bg-color: blue;
width: var( --shape-width );
height: var( --shape-height );
background-color: var( --shape-bg-color );
}

109. What is Programming Anyway? by Felienne

114. .square {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="square"></div>

115. <div class="shape shape--big-square"></div>
<div class="shape shape--small-square"></div
.shape { ... }
.shape--small-square { ... }
.shape--big-square { ... }
.shape--yellow { ... }
.shape--circle { ... }
.shape--rectangle { ... }
<div class="shape
shape--rounded-rectangle"></div>
<div class="shape
shape--circle
shape--big-square
shape--yellow"></div>
<div class="shape"></div>
.shape--has-text {
--shape-height: initial;
--shape-width: initial;
}
.shape__text {
color: white;
font-size: 16px;
}
<button class="shape shape--has-text">
<a href="" class="shape__text"></a>
</button>

116. .square {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="square"></div>

117. .square {
width: 100px;
height: 100px;
}
<div class="square"></div>
<div class="square
square--smaller
u-background-blue"></div>
.u-background-blue {
background-color: blue;
}

128. 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]);

131. .container {
display: flex;
}

133. .container {
display: flex;
}

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

156. .clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}

157. .arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid red;
}

164. Designgineering Chronicles

208. 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