Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
What is SMACSS?2:09 with Guil Hernandez
With SMACSS, we divide our styles into fives categories: base, layout, modules, states, and themes. Each of these categories come with a set of usage rules.
[MUSIC] 0:00 Up to this point, we've learned that modularity in CSS, or 0:04 Sass, is best achieved by minimizing dependencies. 0:08 That means we need to do our best to write code that does not depend on context, so 0:11 that it's flexible and reusable. 0:16 And this stage, we are gonna add a new layer of organization and 0:18 structure to our code by implementing many of the common principles of SMACSS, or 0:22 Scalable And Modular Architecture for CSS. 0:27 SMACSS was created by Johnathan Snook as the style guide that helps organize and 0:31 structure our CSS for projects on any scale. 0:35 It also aims to identify repeating patterns in 0:39 our code that are then combined into modular components. 0:41 We've already been doing a nice job writing code with BEM. 0:45 And now that we have the BEM naming convention down pat, 0:48 we'll stick with that moving forward. 0:51 So what we're gonna do is take advantage of the categorization methods of SMACSS. 0:53 Because with SMACSS, we divide our styles into five categories, base, 0:58 layout, modules, states, and themes. 1:03 Each of these categories come with a set of usage rules. 1:07 So let's go over some of them. 1:09 First, the base rules define what elements look like by default. 1:11 That's where we write the CSS reset styles and 1:15 the default styles for element selectors. 1:18 In the layout rules, we define layout styles for major sections of the page. 1:21 For instance, the header, footer, sidebar, or grid. 1:26 The module rules make up the majority of our project styles. 1:30 That's where we write styles for each module as standalone, reusable components. 1:33 We've already been doing a good job with modules using M. 1:38 Finally, the state rules is where we define styles for element states. 1:42 For example, the hidden, active, collapsed or expanded states of a module. 1:46 And the theme rules define different colors and 1:52 images to give our project a different theme. 1:54 Now, theme rules are usually optional. 1:57 Next, we're gonna apply some of these SMACSS principles to our project. 1:59 As you'll soon learn, it's a pretty solid plan for 2:03 structuring our websites and applications 2:05
You need to sign up for Treehouse in order to download course files.Sign up