BEM➕FLOCSS　に沿ってクラス名をつけるやり方がいまいちわかりません。。

BEM➕FLOCSSに沿ったクラス名のつけ方がわかりません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/reset.css">
8<link rel="stylesheet" href="./css/style.css">
9<title></title>
10<head></head>
11<body>
12  <div class="wrapper">
13  <div class="top">
14  </div>
15  <div class="container">
16    <div class="header">
17      <img src="./img/logo.jpg" >
18      <div class="header-list">
19        <ul>
20          <li>ホーム</li>
21          <li>自己紹介</li>
22          <li>作品</li>
23          <li>お問い合わせ</li>
24        </ul>
25      </div>
26    </div>
27    <div class="main">
28      <div class="main-top">
29        <div class="main-picture"><img src="./img/hero.jpg" ></div>
30        <img src="./img/shadow.jpg">
31        <h1 align=center>世界中を旅するフォトグラファーです。</h1>
32      </div>
33      <div class="main-bottom">
34        <div class="main-left">
35          <h4><span>|</span>最新の作品</h4>
36          <div class="picture-list">
37            <ol>
38              <li><img src="./img/thumb1.jpg" ></li>
39              <li><img src="./img/thumb2.jpg" ></li>
40              <li><img src="./img/thumb3.jpg" ></li>
41            </ol>
42            <ol>
43              <li><img src="./img/thumb4.jpg" ></li>
44              <li><img src="./img/thumb5.jpg" ></li>
45              <li><img src="./img/thumb6.jpg" ></li>
46            </ol>
47          </div>
48        </div>
49        <div class="main-right">
50          <h4><span>|</span>自己紹介</h4>
51          <p>
52            こんにちは、Manaです。世界中を
53            旅しながら写真を撮っています。
54            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>
55            やってます。
56            お気軽にフォローしてください！
57            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
58            い。これはデモサイトです。実際
59            は写真苦手です。はい。
60            こんにちは、Manaです。世界中を
61            旅しながら写真を撮っています。
62            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>やってます。
63            お気軽にフォローしてください！
64            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
65            い。これはデモサイトです。実際
66            は写真苦手です。はい。
67          </p>
68        </div>
69        </div>
70      </div>
71      <div align="center">
72        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg ">
73      </div>
74    </div>
75  </div>
76</body>
77</html>

CSS
1.wrapper{
2  width: 1000px;
3  background-color: #EEE4CA;
4}
5
6.top {
7  height: 20px;
8  background-image:url(/Users/kabayama/Front-Curriculum/Front-Curriculum/kadai_PC/kadai_01/img/bg.jpg );
9  background-repeat: repeat-x;
10  margin-bottom: 40px;
11}
12
13.container{
14  margin:0  auto;
15  width: 970px;
16}
17
18.header{
19  height: 100px;
20}
21
22.header-list{
23  float: right;
24  padding-top: 35px;
25}
26
27.header-list li{
28  float: left;
29  margin-right: 48px;
30  color: 	#5B616A;
31}
32
33.header-list li:last-child{
34  margin-right: none;
35}
36
37.main{
38  margin: 40px 0px;
39}
40
41.main-picture{
42  border: 5px white solid;;
43  width: 950px;
44}
45
46.main-top h1{
47  color: 	#5B616A;
48  font-size: 25px;
49  width: 100%;
50  margin: 0 auto;
51}
52
53.main-bottom{
54  display: flex;
55  margin-top: 30px;
56}
57
58.main-left{
59  width: 650px;
60}
61
62.main-left h4{
63  color: 	#5B616A;
64  font-size: 20px;
65  margin-bottom: 15px;
66}
67
68
69
70span{
71  color: red;
72  font-weight: bold;
73}
74
75.picture-list ol {
76  display: flex;
77}
78
79.picture-list ol li {
80  margin: 5px;
81  border: 5px white solid;;
82}
83
84.main-right{
85  float: right;
86  width: 230px;
87  color: 	#5B616A;
88  padding-left: 30px;
89}
90
91.main-right h4{
92  font-size: 20px;
93  padding-bottom: 15px;
94}
95
96.clearfix::after {
97  content : " ";
98  display : block;
99  clear : both;
100}