Enviar pesquisa
Carregar
CSS-методологии от О до Б
•
0 gostou
•
376 visualizações
Nikolay Yasinskiy
Seguir
Алексей Охрименко. Солянка.dev от 05/08/2016
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 89
Baixar agora
Baixar para ler offline
Recomendados
CSS SELECTORS
CSS SELECTORS
Anush Anilkumar
Základy jQuery
Základy jQuery
Juraj Michálek
Codigos html
Codigos html
Odali Suarez A
Hw 1 2
Hw 1 2
ro_mouse
Pagian web 6
Pagian web 6
jestebanpineda
Методологии верстки
Методологии верстки
Elizaveta Selivanova
Reactive UI на C#
Reactive UI на C#
Nikolay Yasinskiy
Введение в Realm.io
Введение в Realm.io
Nikolay Yasinskiy
Recomendados
CSS SELECTORS
CSS SELECTORS
Anush Anilkumar
Základy jQuery
Základy jQuery
Juraj Michálek
Codigos html
Codigos html
Odali Suarez A
Hw 1 2
Hw 1 2
ro_mouse
Pagian web 6
Pagian web 6
jestebanpineda
Методологии верстки
Методологии верстки
Elizaveta Selivanova
Reactive UI на C#
Reactive UI на C#
Nikolay Yasinskiy
Введение в Realm.io
Введение в Realm.io
Nikolay Yasinskiy
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Mais conteúdo relacionado
Destaque
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Destaque
(20)
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
CSS-методологии от О до Б
1.
CSS МЕТОДОЛОГИИ от О
до Б ( Алексей Охрименко ) IPONWEB
2.
3.
АЛЕКСЕЙ ОХРИМЕНКО TWITTER: AI_BOY setInterval(moveIt)
4.
IPONWEB
5.
6.
CSS ➤ Проблемы
7.
CSS ➤ Проблемы ➤ Визуальные
паттерны
8.
CSS ➤ Проблемы ➤ Визуальные
паттерны ➤ Дизайн паттерны
9.
CSS ➤ Проблемы ➤ Визуальные
паттерны ➤ Дизайн паттерны ➤ Идеология
10.
CSS ➤ Проблемы ➤ Визуальные
паттерны ➤ Дизайн паттерны ➤ Идеология ➤ Методология
11.
ПРОБЛЕМЫ
12.
ПРОБЛЕМЫ СТАРАЯ ЛОГИКА
13.
ПРОБЛЕМЫ <h1>CSS is...</h1> <p>hmmm.... lets
make this underlined</p>
14.
ПРОБЛЕМЫ <h1>CSS is...</h1> <p>hmmm.... lets
make <u>this underlined</u></p>
15.
ПРОБЛЕМЫ <h1>CSS is...</h1> <p>hmmm.... lets
make <u>this <b>underlined</b></u></p>
16.
ПРОБЛЕМЫ Webkit - не
более 2000 вложений
17.
ПРОБЛЕМЫ - КАСКАД <h1>CSS
is...</h1> <p>hmmm.... lets make <u>this <b>underlined</b></u></p>
18.
ПРОБЛЕМЫ ГЛОБАЛЬНОСТЬ CSS
19.
20.
ПРОБЛЕМЫ - SPECIFICITY
( СПЕЦИФИЧНОСТЬ ) .a { color: red; } .a .c { color: blue; } #b { color: green; }
21.
ПРОБЛЕМЫ - SPECIFICITY
( СПЕЦИФИЧНОСТЬ ) .a { 0 1 0 color: red; } .c .a { 0 2 0 color: blue; } #b { 1 0 0 color: green; }
22.
HTTP://CSSSPECIFICITY.COM
23.
ПРОБЛЕМЫ - SPECIFICITY
( СПЕЦИФИЧНОСТЬ ) .a { color: red; } .a { color: blue; }
24.
ПРОБЛЕМЫ - SPECIFICITY
( СПЕЦИФИЧНОСТЬ ) .a.a { color: red; } .a { color: blue; }
25.
ПРОБЛЕМЫ - SPECIFICITY
( СПЕЦИФИЧНОСТЬ ) .a.a x 255 { color: red; } #id { color: blue; }
26.
27.
ВИЗУАЛЬНЫЕ ПАТТЕРНЫ
28.
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
29.
NICOLE SULLIVAN MEDIA OBJECT http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
30.
31.
32.
33.
ДИЗАЙН ПАТТЕРНЫ
34.
/* ====== media
====== */ .media { width: 400px; background: skyblue; } .media, .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } <div class="media"> <a href="http://twitter.com/Ai_boy" class="img"> <img src="http://placehold.it/50x50" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div>
35.
.Media { display: flex; align-items:
flex-start; } .Media-figure { margin-right: 1em; } .Media-body { flex: 1; } <div class="Media"> <img class="Media-figure" src="" alt=""> <p class="Media-body">content</p> </div>
36.
.clearfix:after { content: ""; display:
table; clear: both; }
37.
38.
39.
ИДЕОЛОГИЯ
40.
41.
WET VS DRY
42.
WRITE EVERYTHING TWICE VS DON’T
REPEAT YOURSELF
43.
SEMANTIC VS FUNCTIONAL
44.
<div class="app"> <div class="feed"></div> <div
class="profile"></div> <div class="aside"></div> </div> .feed { border: 1px solid red; width: 300px; height: 50px; } .profile { border: 1px solid red; width: 300px; height: 50px; } .aside { border: 1px solid red; width: 300px; height: 50px; }
45.
<div class="app"> <div class="box"></div> <div
class="box"></div> <div class="box"></div> </div> .box { border: 1px solid red; width: 300px; height: 50px; }
46.
<div class="app"> <div class="feed"></div> <div
class="profile"></div> <div class="aside"></div> </div> .feed { border: 1px solid red; width: 300px; height: 50px; } .profile { border: 1px solid blue; width: 300px; height: 50px; } .aside { border: 1px solid red; width: 300px; height: 50px; }
47.
<div class="app"> <div class="box"></div> <div
class="box new"></div> <div class="box"></div> </div> .box { border: 1px solid red; width: 300px; height: 50px; } .new { border: 1px solid blue; }
48.
49.
МЕТОДОЛОГИЯ
50.
51.
52.
#1
53.
#2
54.
#3
55.
OOCSS
56.
БЕЗ РОДИТЕЛЬСКИХ СЕЛЕКТОРОВ .parent
.item { color: red; }
57.
БЕЗ РОДИТЕЛЬСКИХ СЕЛЕКТОРОВ .item
{ color: red; }
58.
СТРУКТУРА ОТДЕЛЬНО ОТ
ОФОРМЛЕНИЯ .item { float: right; color: red; }
59.
СТРУКТУРА ОТДЕЛЬНО ОТ
ОФОРМЛЕНИЯ .item { float: right; } .red-theme { color: red; }
60.
SMACSS
61.
62.
SMACSS ➤Base ➤Layout ➤Module ➤State ➤Theme
63.
SMACSS ➤Base ➤Layout ➤Module ➤State ➤Theme
64.
SMACSS ➤Base ➤Layout ➤Module ➤State ➤Theme
65.
SMACSS ➤Base ➤Layout ➤Module ➤State ➤Theme
66.
SMACSS ➤Base ➤Layout ➤Module ➤State ➤Theme
67.
BEM
68.
69.
70.
71.
<div class="wrapper"> <div class="tabs
tabs_default"> <a class="tabs__tab tabs__tab_selected"> <h3>Tab 1</h3> </a> <a class="tabs__tab"> <h3>Tab 2</h3> </a> <div class="tabs__content"> <img src="http://placekitten.com/g/580/320" alt="" /> </div> <div class="tabs__content"> <img src="http://placekitten.com/580/320" alt="" /> </div> </div> </div>
72.
<div class="wrapper"> <div class="tabs
tabs_default"> <a class="tabs__tab tabs__tab_selected"> <h3>Tab 1</h3> </a> <a class="tabs__tab"> <h3>Tab 2</h3> </a> <div class="tabs__content"> <img src="http://placekitten.com/g/580/320" alt="" /> </div> <div class="tabs__content"> <img src="http://placekitten.com/580/320" alt="" /> </div> </div> </div>
73.
<div class="wrapper"> <div class="tabs
tabs_default"> <a class="tabs__tab tabs__tab_selected"> <h3>Tab 1</h3> </a> <a class="tabs__tab"> <h3>Tab 2</h3> </a> <div class="tabs__content"> <img src="http://placekitten.com/g/580/320" alt="" /> </div> <div class="tabs__content"> <img src="http://placekitten.com/580/320" alt="" /> </div> </div> </div>
74.
<div class="wrapper"> <div class="tabs
tabs_default"> <a class="tabs__tab tabs__tab_selected"> <h3>Tab 1</h3> </a> <a class="tabs__tab"> <h3>Tab 2</h3> </a> <div class="tabs__content"> <img src="http://placekitten.com/g/580/320" alt="" /> </div> <div class="tabs__content"> <img src="http://placekitten.com/580/320" alt="" /> </div> </div> </div>
75.
ATOMIC CSS
76.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
77.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
78.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
79.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
80.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
81.
<span class="Va(m) D(tbc)
Fz(14px) Fw(b) Whs(nw)"> Mail </span>
82.
AXIOMATIC CSS
83.
NAV, ARTICLE, ASIDE, H1,
H2, H3…
84.
Lobotomized Owl Selector
85.
*+*
86.
87.
THE END
88.
TELEGRAM GROUPS ➤ https://telegram.me/angular2 ➤
https://telegram.me/angular_js ➤ https://telegram.me/react_js ➤ https://telegram.me/nodejs_ru ➤ https://telegram.me/typescriptru ➤ https://telegram.me/reactnative_ru ➤ https://telegram.me/JSlang
89.
АЛЕКСЕЙ ОХРИМЕНКО TWITTER: AI_BOY setInterval(moveIt) http://bit.ly/2amSM76
Baixar agora