From the course: CSS: Design Systems and Architectures
Unlock the full course today
Join today to access over 22,600 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…
Contents
-
-
-
-
-
(Locked)
Overview1m 32s
-
(Locked)
Defining the stages and categories4m 40s
-
(Locked)
Editor settings, tools, and setup2m 21s
-
(Locked)
Formatting rules1m 50s
-
(Locked)
Class-based CSS1m 39s
-
(Locked)
Naming conventions with SMACSS3m 6s
-
(Locked)
Base styles3m 6s
-
(Locked)
Modular CSS3m 25s
-
(Locked)
Responsive2m 16s
-
(Locked)
Templates1m 31s
-
(Locked)
-