-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
320 lines (264 loc) · 10.9 KB
/
index.html
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keeping your stylesheets under control</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/sky.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h2>Keeping your CSS <br>under control</h2>
<h5>- CSS architecture -</h5>
<p>
<small>by <a href="mailto:[email protected]">Razvan Spatariu</a></small>
</p>
<aside class="notes" data-markdown>
* hi everyone
* the purpose of my talk is to make you aware about a simple technique on how to keep the CSS under control
</aside>
</section>
<section>
<h2>CSS</h2>
<p>The language we all love to hate</p>
<img src="/img/peter-css.gif">
<aside class="notes" data-markdown>
* I always complain about CSS and how silly it is
* the problem with CSS is not that it's a silly language, the problem with CSS is that it offers too many options
* you can write inline (please don't), you can have the style tag and throw there some CSS (please don't), or you can write it in a separate file
* even when you're writing it in a different file, the cascading nature of it allows us to mess it up really easy
</aside>
</section>
<section>
<h2>What's the easiest way to fix a CSS issue?</h2>
<div class="fragment">
<p>...just increase specificity or use <code>!important</code></p>
<img src="/img/important.jpg">
<p>(please don't!)</p>
</div>
<aside class="notes">
* funny thing is that something as simple as CSS can render your website unusable for the users
* if we don't want to spend too much time trying to fix CSS we should have some rules in place, some standards so we all speak the same CSS
</aside>
</section>
<section>
<h2>No. 1 enemy for me?</h2>
<div class="fragment">
<h1>Specificty*</h1>
<p><code>#I .can't #even { display: none!important; }</code></p>
<img src="/img/fitting.gif">
<small>* Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied.</small>
</div>
<aside class="notes" data-markdown>
* specificity makes everything brittle
* relying on context for a style makes everything impossible to reuse
* so you have to add more styles, more exceptions, trying to fig a square peg through a round hole
</aside>
</section>
<section>
<h2>Specificity graph</h2>
<div class="col-2">
<h5>Old logged out</h5>
<img src="/img/specificity-old.jpg" alt="">
</div>
<div class="col-2">
<h5>Static content</h5>
<img src="/img/specificity-new.jpg" alt="">
</div>
<aside class="notes">
</aside>
</section>
<section>
<h1>How?</h1>
<img src="/img/sorcery.gif" alt="">
</section>
<section>
<h3>Introducing</h3>
<h1>BEM</h1>
</p><code>.block__element--modifier</code></p>
</section>
<section>
<h3>What is BEM?</h3>
<img src="/img/lego.jpg" alt="" width="30%">
<ul>
<li>it's a naming methodology</li>
<li>created by Yandex</li>
<li>it fakes a more scoped way of developing your CSS</li>
<li>it forces the developer to think in components rather than pages</li>
</ul>
<aside class="notes">
* think about pages being built as using lego
* pages are built using the same components (bricks) just arranged in a different way
* a group of bricks (a component) can form a larger brick (a new, more complex component)
</aside>
</section>
<section>
<h3>Inefficient way:</h3>
<div class="col-2"><img src="/img/example.jpg" alt=""></div>
<div class="col-2">
<pre><code><section class="autobid-tags">
<h1 class="title">Our business loans can suit almost any business purpose:</h1>
<ul class="tags">
<li>Expansion</li>
...
</ul>
<p>And much more, just tell us in the application.</p>
<a href="" class="button-blue">Register Now</a>
</section></code></pre>
</div>
</section>
<section>
<h3><code>.block__element--modifier</code></h3>
<div class="col-2"><img src="/img/example.jpg" alt=""></div>
<div class="col-2">
<pre><code><section class="content-tags">
<h1 class="content-tags__title">Our business loans can suit almost any business purpose:</h1>
<ul class="content-tags__tags">
<li>Expansion</li>
...
</ul>
<p>And much more, just tell us in the application.</p>
<a href="" class="btn btn--regular btn--primary">Register Now</a>
</section></code></pre>
</section>
<section>
<h5>Example of using components and modifiers:</h5>
<img src="/img/example-1.png" alt="" class="no-border">
<pre><code><div class="message">
<h3 class="message__title">Title of the message</h3>
<p class="message__content">Lorem ipsum [...]</p>
</div></code></pre>
<img src="/img/example-2.png" alt="" class="no-border">
<pre><code><div class="message message--success">
<h3 class="message__title">Title of the message</h3>
<p class="message__content">Lorem ipsum [...]</p>
</div></code></pre>
</section>
<section>
<h5>Example of Sass implementation</h5>
<pre><code>.message {
...
&__title { ... }
&__content { ... }
}
// differences between the default and the modifier
.message--success {
...
&__title { ... }
&__content { ... }
}</code></pre>
</section>
<section>
<h1>Prefixed classes</h1>
</section>
<section>
<h3>Utility classes</h3>
<ul>
<li>quick to use classes</li>
<li>prefixed with <code>.u-<UTILITY-NAME></code></li>
<li>can act as quick modifiers</li>
<li>they only have one strict result</li>
</ul>
<br><br>
<h4>Examples:</h4>
<pre><code>.u-center-text { text-align: center; }
.u-block { display: block; }
.u-relative { position: relative; }
.u-img-round {
border-radius: 50%;
display: block;
width: 100%;
height: auto;
}
</code></pre>
</section>
<section>
<h3>Status classes</h3>
<ul>
<li>Used for showing different states of interactive objects</li>
<li>prefixed with <code>.is-<STATE></code></li>
<li>applied/removed from elements using JavaScript</li>
</ul>
<br><br>
<h4>Examples:</h4>
<pre><code>.is-active { display: block; }
.is-hidden { display: none; }
.is-transparent { visibility: hidden; }
.is-visible { opacity: 1; }</code></pre>
</section>
<section>
<h3>Binding JavaScript</h3>
<ul>
<li>never use classes for both styling and binding JS</li>
<li>prefix classes with <code>.js-<FUNCTION></code></li>
</ul>
<br><br>
<h4>Examples:</h4>
<pre><code><span class="content-tags__tags js-insert-tags">...</span></code></pre>
</section>
<section>
<h3>Let's recap</h3>
<ul>
<li>don't use inline CSS</li>
<li>don't increase specificity if not needed</li>
<li>never EVER use <code>!important</code></li>
<li>think about pages as a collection of small components</li>
<li>use BEM to create small islands (components) of styles</li>
<li>styling of an element should not rely on the context, except if that context is defined by BEM</li>
<li>use <code>.is-STATUS</code> to define the status</li>
<li>use <code>.js-FUNCTION</code> to bind JS</li>
</ul>
</section>
<section>
<h1>Thank you!</h1>
<p>Questions?</p>
<img src="/img/nobones.gif" alt="">
<p><a href="mailto:[email protected]">[email protected]</a></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>