CSS for Software Engineers for CSS Developers

3 min read Original article ↗

  • 1959

  • The First Modern Programming Language

  • 1959 2015 1990 1996

  • 1959 2015 1996

  • A 37-Year Head Start All that wisdom! We should get

    as much from their head start as we can. The time between the first modern programming language and CSS is greater than the time between CSS and now. Software engineers have been writing code for 37 years longer than front-end developers have.

  • DRY/Single Source of Truth

  • “ Confusion If you manually type a declaration 50 times

    in a project, you are repeating yourself: this is not DRY. If you can generate that declaration 50 times without having to manually repeat it, this is DRY: you are generating repetition without actually repeating yourself. This is quite a subtle but important distinction to be aware of. — csswz.it/1ytQkxp

  • The Single Responsibility Principle

  • The Single Responsibility Principle Subway is the epitome of SRP.

    Break things down into their smallest possible parts. Ensure each part fulfils its responsibility very well. Combine responsibilities to create complex components. Swap out, remove, or add discrete parts. Helps you Separate your Concerns. Gives you incredible opportunity and flexibility.

  • 6,442,450,944

  • The Separation of Concerns

  • “ The Separation of Concerns […] It is, that one

    is willing to study in depth an aspect of one’s subject matter in isolation for the sake of its own consistency […] But nothing is gained—on the contrary! —by tackling these various aspects simultaneously. It is what I sometimes have called ‘the separation of concerns’ […] it does not mean ignoring the other aspects, it is just doing justice to the fact that from this aspect’s point of view, the other is irrelevant. It is being one- and multiple-track minded simultaneously. — wikipedia.org/wiki/Separation_of_concerns

  • “ The Separation of Concerns If in 14 months you

    find a new view library or framework you want to try out, you’re out of luck. You will have to invest a lot of time into pulling styles back out of JavaScript modules and into stylesheets again. — keithjgrant.com/posts/against-css-in-js.html

  • Immutability

  • Immutability .col-6 { width: 50%; }

  • Cyclomatic Complexity

  • Cyclomatic Complexity M = E - N + 2P Basically

    just the number of IFs/ELSEs. A form of static analysis. Counting the number of paths through a program. The amount of potential outcomes given certain conditions. Higher complexity is bad: simpler is always better.

  • Cyclomatic Complexity M = E - N + 2P Basically

    just the number of IFs/ELSEs. A form of static analysis. Counting the number of paths through a program. The amount of potential outcomes given certain conditions. Higher complexity is bad: simpler is always better. Whut?!

  • Cyclomatic Complexity div.main section.content h1 a span {}

  • Cyclomatic Complexity div#body section.container section.main div.categories ul li a.product-title {}

  • Cyclomatic Complexity div#body section.container section.main div.categories ul li a.product-title {}

  • The Open/Closed Principle

  • The Open/Closed Principle .btn { ... padding: 1em 2em; }

  • The Open/Closed Principle A safe way to make changes. Everything

    gets opted into explicitly. Prevents changes from happening one-sidedly; the developer has to add the class into the markup as well. A second layer of safety: changes can’t be actioned from one place alone. Build things forward. Analogous to rewriting Git history. Safe way of working with legacy.

  • Orthogonality

  • Collisions!

  • Proper scoping provides orthogonality

  • The Moustache Principle

  • Thank You Harry Roberts csswizardry.com [email protected] @csswizardry speakerdeck.com/csswizardry