From the course: CSS: Design Systems and Architectures
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Modular CSS - CSS Tutorial
From the course: CSS: Design Systems and Architectures
Modular CSS
- [Instructor] Similar to LEGO pieces, your design components have their own characteristics that can be combined to create new components. One way to ensure that your code is reusable is to make it modular. The CSS for the various components should not be reliant on the page structure or a parent element that is not part of the component itself. For example, let's say you have a button style. It may be used in a form to submit an email address to the mailing list. It could also be used on the home page to click into a blog post. If both buttons are supposed to look the same, they should be able to work on their own and within these different components. To create modular and efficient CSS, use selectors that don't rely too heavily on the HTML structure. Let's take a look at an example on codepen.io. This is an online editor and if you'd like to keep a copy, you can Fork this version and make your own copy. In this example, I can style the heading with the selector .module h1. But…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.