O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building a CSS Style Guide from Scratch

Video Description

A well-designed CSS style guide offers more than just consistent patterns; it ensures web accessibility, better site performance, improved engineering and design efficiency, and provides your users with a uniform experience across your entire application or suite of applications. In this course, you’ll learn how to build a CSS style guide from scratch. You'll explore each of the user interface (UI) components that go into the most effective style guides; you'll examine the benefits of maintaining a “living” style guide (i.e., provides flexibility, responds to an application's changing needs, etc.); and you'll learn about the analysis and linting tools that measure your CSS and assist with style guide maintenance. Participants should understand the fundamentals of HTML and CSS.

  • Learn how to build a style guide from scratch using the PostCSS style guide builder
  • Explore the different UI components that make up a style guide
  • Discover how to incorporate a style guide in your product or website
  • Understand why you need a “living” style guide and how to maintain one
  • Learn how to measure your CSS for redundancy, accessibility, and complexity
  • Explore the process and linting required to analyze and maintain a style guide

Archana Sankaranarayanan has a passion for building simple and intuitive user experiences. She works as a senior UI engineer at Netflix and her background includes stints at Coursera, Quantifind, and Adobe Systems. Archana holds a Masters in Information Systems Management from Carnegie Mellon University.