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.

Algorithms in CSS v3.1.0 | CSS Day 2019

460 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×