CSS for Developers

Tooling

Table of Content

  • CSS Preprocessors (SASS, LESS, PostCSS)
  • Libraries (Bootstrap, Material UI, Tailwind CSS)
  • Helpers (Dev Tools, 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);
                }

Recommendation

Analyse your needs before blindly adding one to your project.

With the evolution of CSS in the past years most use cases for preprocessors are easily solvable without them.

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

Browser Dev Tools

Mastering your browser's dev tools is essential. They allow you to:

  • inspect and change any elements styles and classes
  • toggle states like hover or focus
  • add/remove elements
  • analyse inheritance and overrides
  • show grid lines, flex containers and spacings
  • simluate different screen sizes and accessibility features

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?