Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 1 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 2 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 3 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 4 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 5 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 6 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 7 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 8 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 9 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 10 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 11 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 12 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 13 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 14 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 15 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 16 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 17 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 18 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 19 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 20 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 21 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 22 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 23 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 24 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 25 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 26 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 27 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 28 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 29 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 30 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 31 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 32 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 33 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 34 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 35 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 36 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 37 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 38 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 39 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 40 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 41 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 42 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 43 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 44 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 45 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 46 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 47 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 48 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 49 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 50 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 51 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 52 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 53 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 54 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 55 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 56 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 57 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 58 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 59 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 60 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 61 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 62 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 63 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 64 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 65 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 66 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 67 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 68 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 69 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 70 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 71 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 72 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 73 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 74 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 75 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 76 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 77 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 78 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 79 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 80 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 81 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 82 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 83 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 84 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 85 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 86 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 87 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 88 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 89 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 90 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 91 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 92 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 93 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 94 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 95 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 96 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 97 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 98 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 99 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 100 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 101 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 102 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 103 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 104 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 105 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 106 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 107 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 108 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 109 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 110 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 111 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 112 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 113 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 114 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 115 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 116 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 117 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 118 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 119 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 120 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 121 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 122 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 123 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 124 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 125 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 126 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 127 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 128 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 129 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 130 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 131 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 132 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 133 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 134 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 135 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 136 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 137 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 138 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 139 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 140 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 141 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 142 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 143 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 144 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 145 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 146 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 147 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 148 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 149 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 150 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 151 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 152 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 153 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 154 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 155 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 156 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 157 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 158 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 159 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 160 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 161 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 162 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 163 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 164 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 165 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 166 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 167 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 168 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 169 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 170 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 171 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 172 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 173 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 174 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 175 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 176 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 177 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 178 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 179 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 180 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 181 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 182 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 183 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 184 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 185 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 186 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 187 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 188 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 189 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 190 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 191 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 192 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 193 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 194 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 195 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 196 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 197 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 198 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 199 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 200 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 201 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 202 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 203 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 204 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 205 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 206 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 207 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 208 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 209 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 210 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 211 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 212 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 213 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 214 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 215 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 216 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 217 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 218 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 219 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 220 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 221 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 222 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 223 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 224 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 225 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 226 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 227 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 228 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 229 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 230 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 231 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 232 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 233 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 234 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 235 Algorithms in CSS v3.1.0 | CSS Day 2019 Slide 236
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

Algorithms in CSS v3.1.0 | CSS Day 2019

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Algorithms in CSS v3.1.0 | CSS Day 2019

  1. 1. What is A Programming Language? By Will Chrichton
  2. 2. Link to the Tweet.
  3. 3. Link to the Tweet.
  4. 4. Wikipedia
  5. 5. WolframMathWorld
  6. 6. WolframMathWorld
  7. 7. WolframMathWorld
  8. 8. WolframMathWorld
  9. 9. 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; }
  10. 10. Rule 110 in CSS/HTML/Human
  11. 11. Accidentally Turing Complete by Andreas Zwinkau
  12. 12. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  13. 13. <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; }
  14. 14. <div class="square"></div>.square {     width: 100px;     height: 100px;     background-color: blue; }
  15. 15. <div class="box"></div>.square {     --square-size: 100px;     width: var( --square-size );     height: var( --square-size );     background-color: blue; } <div class="square"></div>
  16. 16. .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; }
  17. 17. .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%; }
  18. 18. .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; }
  19. 19. .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 { ... }
  20. 20. <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 ); }
  21. 21. <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 ); }
  22. 22. .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>
  23. 23. <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>
  24. 24. .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>
  25. 25. .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 { ... }
  26. 26. <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 { ... }
  27. 27. Sign Up For Our Newsletter
  28. 28. <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>
  29. 29. Sign Up For Our Newsletter 📝 Sign Up For Our Newsletter
  30. 30. <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>
  31. 31. Robert C. Martin in The Future of Programming
  32. 32. Immutable CSS on CSS Wizardry
  33. 33. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  34. 34. <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 ); }
  35. 35. What is Programming Anyway? by Felienne
  36. 36. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  37. 37. <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>
  38. 38. .square {     width: 100px;     height: 100px;     background-color: blue; } <div class="square"></div>
  39. 39. .square {     width: 100px;     height: 100px; } <div class="square"></div> <div class="square square--smaller u-background-blue"></div> .u-background-blue {     background-color: blue; }
  40. 40. 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]);
  41. 41. .container {     display: flex; }
  42. 42. .container {     display: flex; }
  43. 43. .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     } }
  44. 44. .clearfix::before, .clearfix::after {     content: "";     display: table; } .clearfix::after {     clear: both; }
  45. 45. .arrow-up {     width: 0;     height: 0;     border-left: 15px solid transparent;     border-right: 15px solid transparent;     border-bottom: 15px solid red; }
  46. 46. Designgineering Chronicles
  47. 47. 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
  • iolo

    Aug. 5, 2020
  • Eric_wei1990

    Aug. 5, 2020
  • aaronafante

    Jun. 19, 2019

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.

Views

Total views

1,184

On Slideshare

0

From embeds

0

Number of embeds

64

Actions

Downloads

17

Shares

0

Comments

0

Likes

3

×