-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathclassname.html
More file actions
121 lines (94 loc) · 8.53 KB
/
Copy pathclassname.html
File metadata and controls
121 lines (94 loc) · 8.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<title></title>
<style>
pre {background-color:#D9E9FF;padding:1ex;color:#222;}
pre .c {color:#B11D1D;font-weight:bold;}
.xmn {background-color: #D9E9FF;color: #222222;font-family: Helvetica;font-size: 14px;padding: 0 0.5ex;}
.gmn {line-height:18px;}
</style>
</head>
<body>
<h3>Данный способ наименования классов необходим для упрошения создания уникальных имен класса.</h3>
<div class="gmn"><span class="xmn">префикс</span>-<span class="xmn">имя_обьекта</span>-<span class="xmn">имя_элемената_в_обьекте</span></div>
<div class="gmn"><span class="xmn">префикс</span>-<span class="xmn">имя_обьекта</span>-<span class="xmn">имя_элемената_в_обьекте</span>--<span class="xmn">флаг_состояния</span></div>
<div class="gmn"><span class="xmn">префикс</span>-<span class="xmn">имя_обьекта</span>-<span class="xmn">имя_элемената_в_обьекте</span>--<span class="xmn">параметр</span>-<span class="xmn">значение</span></div>
<pre>
<font size="2" face="Courier New" color="black"><div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта b-имя_обьекта--имя_флага"</font>>
<div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта-имя_элемената"</font>>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта-name b-имя_обьекта-name--red"</font>>текст текст</span>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта-time"</font>>10:30</span>
</div>
<p <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта-box"</font>>
</p>
</div>
</font>
</pre>
"<b>b-</b>" - префикс класса. Он нужен. Префикс это "подсветка кода". Предпологается что имя класса без префикса обязательно должен быт связан с родительским элеиментом у которого он есть. Также префикс символизирует что имя созданно по особому принципу и выделяет такие имена среди других техник. Префикс несет только дополнительную смысловую нагрузку и дает подсказку на вопрос "откуда этот класс?".<br>
<br>
"b-" - описание каркаса<br>
"m-" - этот модификатор аналог "b-" но полученный от родительского обьекта.<br>
"s-" - модификатор стилизации. вся стилизация проекта задается этими классами. <br>
"i-" - прочии модификаторы: фона(картинка), ...<br>
<br>
<b>имя_обьекта</b> - это обьект который верстаем.<br>
<b>имя_элемената</b> - это название элемената обьекта.<br>
<br>
Имена пишуться или одним словом или через нижнее_подчеркивание или горбатымСтилем.<br>
Разделителем между префиксом, имя_обьекта и имя_элемента выступает знак дефиса "<b>-</b>".<br>
Делать иерархию из имен не стоит. те так делать не стоит <b>b-имя_обьекта-имя_элемената-name</b>, лучше назвать как то по другому или <b>b-имя_обьекта-имя_элемената_Name</b>. <br>
<br>
<b>Флаги</b> это класс состояния элемента. Класс имеет вид "имя_элемент<b>--имя_флага</b>". <br>
Имя флага можно записать или одним словом или через нижнее_подчеркивание или горбатымСтилем.<br>
Сложные имена флагов разделяются одним знаком дефиса "<b>-</b>" и имеют вид "<b>--параметр-значение</b>"<br>
<br>
<b>Модификатор</b> - класс который относиться к другому обьекту, но добавлен чтобы изменить свойства элемента. к примеру "b-ubutton-text m-pageform-remove_text b-ubutton-text--small" : "b-ubutton-text" это элемент, "b-ubutton-text--small" это состояние элемнета , "m-pageform-remove_text" - модификатор который относиться к обьекту "pageform"<br/>
<br>
<br>
в теории можно добиться сжатие имен (замена имени класа на компактный аналог: "b-имя_обьекта-имя_элемената" -> "zW4").<br>
эффективнось сжатия сомнительна, потому как по отношению к gzip выигрыш незначительный. но такая возможность есть.<br>
<br>
Для автоматизации "сжатия" и отличать что можно сжимать а какие классы нельзя можно воспользоваться префиксами:<br>
одно буквенный префикс "<b>b-</b>" говорит что имя_класса можно сжимать<br>
двух буквенный префикс "<b>bb-</b>" сжимать не рекомендуется. Но возможна частичное сжатие "<u>bb-имя_обьекта</u>-незжимаемая_часть"<br>
<br>
<hr>
<br>
Альтернатива для случия когда [--] использовать нельзя (идея из bem )
<pre>
<font size="2" face="Courier New" color="black"><div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта b-имя_обьекта-имя_флага"</font>>
<div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__имя_элемената"</font>>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__name b-имя_обьекта__name-red"</font>>текст текст</span>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__time"</font>>10:30</span>
</div>
<p <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__box"</font>>
</p>
</div>
</font>
</pre>
<br>
<br>
Еще одна альтернатива для случия когда [--] использовать можно :)
<pre>
<font size="2" face="Courier New" color="black"><div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта b-имя_обьекта--имя_флага"</font>>
<div <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__имя_элемената"</font>>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__name b-имя_обьекта__name--red"</font>>текст текст</span>
<span <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__time"</font>>10:30</span>
</div>
<p <font color="#0000ff">class</font>=<font color="#A31515">"b-имя_обьекта__box"</font>>
</p>
</div>
</font>
</pre>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2058396-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>