diff --git a/css-isolation/index.html b/css-isolation/index.html index 8400049..b60fcc0 100644 --- a/css-isolation/index.html +++ b/css-isolation/index.html @@ -58,11 +58,11 @@

Никита
Дубко

-
+
@@ -105,7 +105,7 @@

😬 Тоже работает

-
+
-

😢 Но зачем?

+

😢 И так везде?

@@ -150,21 +150,13 @@

😢 Но зачем?

.link { color: red; } -.nav-link { color: lightsteelblue; } +.nav-link { color: lightsteelblue; } -a:-webkit-any-link { + 
a:-webkit-any-link {
     color: -webkit-link;
     cursor: pointer;
     text-decoration: underline;
 }
-
@@ -241,8 +233,8 @@

⬇️ Сверху вниз

a:-webkit-any-link 0 - 2 - 0 + 1 + 1 Browser @@ -279,19 +271,19 @@

⬇️ Сверху вниз

a:-webkit-any-link color -webkit-link - 0,2,0 + 0,1,1 a:-webkit-any-link cursor pointer - 0,2,0 + 0,1,1 a:-webkit-any-link text-decoration underline - 0,2,0 + 0,1,1
@@ -327,19 +319,19 @@

⬆️ Снизу вверх

a:-webkit-any-link color -webkit-link - 0,2,0 + 0,1,1 a:-webkit-any-link cursor pointer - 0,2,0 + 0,1,1 a:-webkit-any-link text-decoration underline - 0,2,0 + 0,1,1
@@ -375,19 +367,19 @@

🔀 Сортируем

a:-webkit-any-link color -webkit-link - 0,2,0 + 0,1,1 a:-webkit-any-link cursor pointer - 0,2,0 + 0,1,1 a:-webkit-any-link text-decoration underline - 0,2,0 + 0,1,1
@@ -395,10 +387,11 @@

🔀 Сортируем

<nav class="navbar-inverse">
     <ul class="navbar-nav">
-        <li><a href="#" class="nav-link">Link 1</a></li>
+        <li><a href="#" class="nav-link">Link 1</a></li>
         <li><a href="#" class="nav-link">Link 2</a></li>
     </ul>
 </nav>
+ @@ -461,7 +454,7 @@

Как сделать хорошо?

-

1. Избавляемся от веса

+

1. Избавляемся от веса

@@ -523,20 +516,23 @@

💡 Правила именования

- 
<nav class="nav"> <!-- ⬅ Блок -->
-    <ul class="nav__list"> <!-- ⬅ Элемент -->
+        
<nav class="nav">
+    <ul class="nav__list">
         <li class="nav__list-item">
             <a href="#" class="nav__link">
                 Ссылка 1
             </a>
         </li>
-        <li class="nav__list-item"> <!-- Модификатор ⬇ -->
+        <li class="nav__list-item">
             <a href="#" class="nav__link nav__link--active">
                 Ссылка 2
             </a>
         </li>
     </ul>
 </nav>

+        
+        
+
@@ -546,11 +542,11 @@

💡 Правила именования файлов

/* nav.css */
 
-.nav { /* ... */ }
-.nav__list { /* ... */ }
-.nav__list-item { /* ... */ }
-.nav__link { /* ... */ }
-.nav__link--active { /* ... */ }
+.nav { /* блок */ } +.nav__list { /* элемент */ } +.nav__list-item { /* элемент */ } +.nav__link { /* элемент */ } +.nav__link--active { /* модификатор */ }
@@ -567,6 +563,7 @@

А если вложенные блоки?

</li> </ul> </nav> +
@@ -619,6 +616,18 @@

+
+

+ Дизайн-блоки +
+ ⬇
+ Компоненты +
+ ⬇
+ Приложение +

+
+

✅ Профит!

@@ -640,7 +649,7 @@

❌ Минусы БЭМ & Co

- +
@@ -662,6 +671,8 @@

Большой бандл?

display: flex; flex-direction: column; } + +
@@ -672,8 +683,7 @@

Нашёл в Поиске

- - +
@@ -740,9 +750,9 @@

😐 HTML же раздуется!

-
+

🤔 А как рефакторить?

@@ -878,6 +888,11 @@

❌ Минусы TailwindCSS

+
+ + Classic rock, Mario Kart, and why we can't agree on Tailwind +
+
Давай подключим карусельку!
Заказчик @@ -891,7 +906,7 @@

❌ Минусы TailwindCSS

-
И дизайн-систему, у гугла видел хорошую!
+
И Material, у гугла видел!
Заказчик
@@ -1186,6 +1201,10 @@

😒 Оно же не работает

+
+

🗓️ 24 октября 2023

+
+

😈 Ломаем наследование

@@ -1243,20 +1262,20 @@

@layer

} p { font-size: 18px; } + 
<p id="id" class="class">Text</p>
- 
@layer first, second;
-@layer second {
+        
@layer first, second;

+        
@layer second {
     p { color: yellow; }
     #id { color: red; }
-}
-@layer first {
+}

+        
@layer first {
     .class { color: blue; }
-}
-
-p { color: green; }

+}
+
p { color: green; }
@@ -1443,14 +1462,13 @@

⏺️ Ищем победителя

@layer important { /* ... */ } @layer common { /* ... */ } -} - -@layer utilities.common { +} +
@layer utilities.common {
     /* ... */
 }
-
+

😒 Сказки какие-то...

@@ -1494,7 +1512,7 @@

@scope

- 
<div className="card">
+        
<div class="card">
 
     <style scoped>
         h2 { font-weight: 300; }
@@ -1592,6 +1610,11 @@ 

+        
@scope (.card) to (.content) {
+    p {
+        color: var(--color-card);
+    }
+}

         
<div class="card">
     <p>Some Text</p>
     <div class="content">
@@ -1599,12 +1622,7 @@
@@ -1683,7 +1701,6 @@

Берегите себя!

@dark_mefody
t.me/mefody_dev - QR-код со ссылкой на доклад QR-код на голосование
@@ -1696,6 +1713,28 @@

Берегите себя!

+ diff --git a/css-isolation/pictures/arrow-block.png b/css-isolation/pictures/arrow-block.png new file mode 100644 index 0000000..1239439 Binary files /dev/null and b/css-isolation/pictures/arrow-block.png differ diff --git a/css-isolation/pictures/arrow-element.png b/css-isolation/pictures/arrow-element.png new file mode 100644 index 0000000..e259bd4 Binary files /dev/null and b/css-isolation/pictures/arrow-element.png differ diff --git a/css-isolation/pictures/arrow-modifier.png b/css-isolation/pictures/arrow-modifier.png new file mode 100644 index 0000000..f47adca Binary files /dev/null and b/css-isolation/pictures/arrow-modifier.png differ diff --git a/css-isolation/pictures/arrow.svg b/css-isolation/pictures/arrow.svg new file mode 100644 index 0000000..05e4279 --- /dev/null +++ b/css-isolation/pictures/arrow.svg @@ -0,0 +1 @@ + diff --git a/css-isolation/pictures/article-tailwind.png b/css-isolation/pictures/article-tailwind.png new file mode 100644 index 0000000..e7c2a00 Binary files /dev/null and b/css-isolation/pictures/article-tailwind.png differ diff --git a/css-isolation/pictures/layers-example.png b/css-isolation/pictures/layers-example.png new file mode 100644 index 0000000..555445c Binary files /dev/null and b/css-isolation/pictures/layers-example.png differ diff --git a/css-isolation/pictures/meme_but.jpg b/css-isolation/pictures/meme_but.jpg index cbab3f6..72525a8 100644 Binary files a/css-isolation/pictures/meme_but.jpg and b/css-isolation/pictures/meme_but.jpg differ diff --git a/css-isolation/style.css b/css-isolation/style.css index 70a2d4a..45a2c6b 100644 --- a/css-isolation/style.css +++ b/css-isolation/style.css @@ -97,9 +97,15 @@ color: var(--color-red); } +.slide blockquote.place { + width: 60%; +} + .slide blockquote::before { color: var(--color-yellow); opacity: 0.5; + font-size: 6em; + left: -24px; } .slide .opaque {
.navbar-inverse .navbar-nav > li > a ✅