1
00:00:00,336 --> 00:00:04,542
[MUSIC]

2
00:00:04,542 --> 00:00:08,123
Up to this point, we've learned that
modularity in CSS, or

3
00:00:08,123 --> 00:00:11,660
Sass, is best achieved by minimizing
dependencies.

4
00:00:11,660 --> 00:00:16,400
That means we need to do our best to write
code that does not depend on context, so

5
00:00:16,400 --> 00:00:18,750
that it's flexible and reusable.

6
00:00:18,750 --> 00:00:22,180
And this stage, we are gonna add a new
layer of organization and

7
00:00:22,180 --> 00:00:27,480
structure to our code by implementing many
of the common principles of SMACSS, or

8
00:00:27,480 --> 00:00:31,025
Scalable And Modular Architecture for CSS.

9
00:00:31,025 --> 00:00:35,730
SMACSS was created by Johnathan Snook as
the style guide that helps organize and

10
00:00:35,730 --> 00:00:39,220
structure our CSS for projects on any
scale.

11
00:00:39,220 --> 00:00:41,810
It also aims to identify repeating
patterns in

12
00:00:41,810 --> 00:00:45,850
our code that are then combined into
modular components.

13
00:00:45,850 --> 00:00:48,980
We've already been doing a nice job
writing code with BEM.

14
00:00:48,980 --> 00:00:51,620
And now that we have the BEM naming
convention down pat,

15
00:00:51,620 --> 00:00:53,480
we'll stick with that moving forward.

16
00:00:53,480 --> 00:00:58,310
So what we're gonna do is take advantage
of the categorization methods of SMACSS.

17
00:00:58,310 --> 00:01:03,630
Because with SMACSS, we divide our styles
into five categories, base,

18
00:01:03,630 --> 00:01:07,020
layout, modules, states, and themes.

19
00:01:07,020 --> 00:01:09,780
Each of these categories come with a set
of usage rules.

20
00:01:09,780 --> 00:01:11,670
So let's go over some of them.

21
00:01:11,670 --> 00:01:15,780
First, the base rules define what elements
look like by default.

22
00:01:15,780 --> 00:01:18,440
That's where we write the CSS reset styles
and

23
00:01:18,440 --> 00:01:21,720
the default styles for element selectors.

24
00:01:21,720 --> 00:01:26,450
In the layout rules, we define layout
styles for major sections of the page.

25
00:01:26,450 --> 00:01:29,190
For instance, the header, footer, sidebar,
or grid.

26
00:01:30,280 --> 00:01:33,620
The module rules make up the majority of
our project styles.

27
00:01:33,620 --> 00:01:38,300
That's where we write styles for each
module as standalone, reusable components.

28
00:01:38,300 --> 00:01:41,510
We've already been doing a good job with
modules using M.

29
00:01:42,630 --> 00:01:46,870
Finally, the state rules is where we
define styles for element states.

30
00:01:46,870 --> 00:01:52,120
For example, the hidden, active, collapsed
or expanded states of a module.

31
00:01:52,120 --> 00:01:54,500
And the theme rules define different
colors and

32
00:01:54,500 --> 00:01:57,406
images to give our project a different
theme.

33
00:01:57,406 --> 00:01:59,380
Now, theme rules are usually optional.

34
00:01:59,380 --> 00:02:03,460
Next, we're gonna apply some of these
SMACSS principles to our project.

35
00:02:03,460 --> 00:02:05,940
As you'll soon learn, it's a pretty solid
plan for

36
00:02:05,940 --> 00:02:08,210
structuring our websites and applications