CSS for Developers

Lucas Schnüriger & Mithusan Sivakumar

Tooling

Table of Content

  • CSS Preprocessors (SASS, LESS, PostCSS)
  • Libraries (Bootstrap, Material UI, Tailwind CSS)
  • Helpers (Storybook, Visual Testing Tools)

CSS Pre­processors

Why preprocessors?

Providing features that don't exist (or haven't existed) natively in CSS. For example, nesting, mixins, functions or inheritance.

Mixin

              
                @mixin mobile-only {
                  @media (max-width: $mobile-width) {
                    @content;
                  }
                }
              
            
              
                .root {
                  @include mobile-only {
                    display: none;
                  }
                }

Function

              
                @function spacing($space) {
                  @if $space == 4 {
                    @return "4px";
                  } @else if $space == 8 {
                    @return "8px";
                  }
                  ...
                }
              
            
              
                .root {
                  padding: spacing(4);
                }

Example: Nesting


            nav {
              ul {
                margin: 0;
                padding: 0;
              }

              li { display: inline-block; }

              a {
                display: block;
                padding: 6px 12px;
              }
            }

CSS (Component) Libraries

High-Level Libraries

  • Material UI
  • Bootstrap

Utility Libraries

  • Tailwind CSS
  • CSS-in-JS (Styled Components)

Vendor Prefixes

Vendor prefixes allow us to use newer features not yet considered stable. This approach is falling out of favor though.

  • -webkit-: Chrome-based browsers, Safari
  • -moz-: Firefox
  • -ms-: IE, old Edge (no longer relevant)
  • -o-: Opera (no longer relevant)
Utility libraries such as Tailwind provide this out-of-the-box (if required).

Development Helpers

Isolated Component Development

Visual Testing Tools

Automated visual regression testing using screenshots allows teams to replace manual testing of UI components and pages. It ensures consistency of the UI.

Questions?