OOCSSMonday, February 25, 13
Избегать двойников                                             Heading 1                          «у нас уже есть    Headi...
Location-dependentMonday, February 25, 13
function square()Monday, February 25, 13
function square()Monday, February 25, 13
это неправильноMonday, February 25, 13
но в CSS это                           постоянноMonday, February 25, 13
Заголовок не должен стать                      заголовком   в другой части страницыMonday, February 25, 13
Плохо                    • В новых модулях            .module1 h3 {color:red}                          заголовок будет без...
Лучше, но                    •     не сможем                          использовать все                                    ...
А можно так                                                 .h1,h1 {}                • Стили по умолчанию есть        .h2,...
Избегать CSS для                                 тагов                • Если только это не           div {}               ...
Вес селекторов                                          html .content .module .ul {}                                      ...
Вес селекторов                                          html .content .module .ul {}                                      ...
Вес селекторов                                          html .content .module .ul {}                                      ...
Избегать контекста                                       .main ul {}                                       .sidebar ul{}  ...
Избегать контекста                                       .main ul {}                                       .sidebar ul{}  ...
Избегать контекста                                       .main ul {}                                       .sidebar ul{}  ...
Вёрстка по модулям                    • Разбить сайт на области и верстать их                          как отдельные элеме...
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
Monday, February 25, 13
Раньше так:                    div#myBlockMonday, February 25, 13
Обычный блок                    div#myBlock                          h2       #myBlock h2{...}                            ...
Спустя неделю                          «Ой, а давайте в погоде сделаем список                          как в блоке аналити...
Fail                          h2                                  #myModule h2{...}                                  #myMo...
Правильный подход                          .block                      .heading                                   .block{....
Модифицируем блокиMonday, February 25, 13
Модифицируем блоки                          ul.list   ul.list                                       .with-imageMonday, Feb...
И?Monday, February 25, 13
h2.heading        h2.heading           h2.heading                                ul.switcher                   ul.list    ...
Facebook                    • Очень много простых стилей                    • Комбинации классов                    • Вы е...
Monday, February 25, 13
Читать                    • https://github.com/stubbornella/oocss/wikiMonday, February 25, 13
Upcoming SlideShare
Loading in...5
×

OOCSS – JURIY ARTYUKH for Tech Hangout - Tech Hangout #20 - 2013.04.03

330

Published on

В гостях у Tech Hangout Юрий Артюх - специалист по верстке с многолетним стажем, «зачинщик» многих украинских мероприятий о веб-технологиях, организатор площадки для обмена опытом среди веб-профессионалов Smartme.

* Tech Hangout – мероприятие, организованное разработчиками для разработчиков с целью обмена знаниями и опытом. Подобные встречи проводятся еженедельно по средам с 12:00 до 13:00 и охватывают исключительно инженерные темы. Формат данного ивента подразумевает под собой 30 минутный доклад на ранее определенную тему, и такую же по продолжительности дискуссию в формате круглого стола.
Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в Hangout Club!

Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/
Читайте нас на - http://hangout.innovecs.com/

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

OOCSS – JURIY ARTYUKH for Tech Hangout - Tech Hangout #20 - 2013.04.03

  1. 1. OOCSSMonday, February 25, 13
  2. 2. Избегать двойников Heading 1 «у нас уже есть Heading 2 Heading 3 похожий элемент» Heading 4 Heading 5 HEADING 6Monday, February 25, 13
  3. 3. Location-dependentMonday, February 25, 13
  4. 4. function square()Monday, February 25, 13
  5. 5. function square()Monday, February 25, 13
  6. 6. это неправильноMonday, February 25, 13
  7. 7. но в CSS это постоянноMonday, February 25, 13
  8. 8. Заголовок не должен стать заголовком в другой части страницыMonday, February 25, 13
  9. 9. Плохо • В новых модулях .module1 h3 {color:red} заголовок будет без .weathermodule2 h3{color:blue} стиля • Надо будет снова его стилизовать - усилияMonday, February 25, 13
  10. 10. Лучше, но • не сможем использовать все h3 {color:green;} стили в одном модуле .module1 h3 {color:red} • трудно сделать .weathermodule h3{color:blue} зеленый заголовок внутри модуля • Красный и синий нельзя сделать вне модулейMonday, February 25, 13
  11. 11. А можно так .h1,h1 {} • Стили по умолчанию есть .h2,h2 {} • Гибкость, предсказуемость .h3,h3 {} .h4,h4 {} и семантика .h5,h5 {} <h3 class="h1"></h3> .h6,h6 {}Monday, February 25, 13
  12. 12. Избегать CSS для тагов • Если только это не div {} стили по умолчанию ul {} .module ul {}Monday, February 25, 13
  13. 13. Вес селекторов html .content .module .ul {} .module .block {} • Сохранять примерно один весMonday, February 25, 13
  14. 14. Вес селекторов html .content .module .ul {} .module .block {} • Сохранять примерно один весMonday, February 25, 13
  15. 15. Вес селекторов html .content .module .ul {} .module .block {} • Сохранять .weather .ul {} примерно один .module .block {} весMonday, February 25, 13
  16. 16. Избегать контекста .main ul {} .sidebar ul{} • Модифицировать сам объектMonday, February 25, 13
  17. 17. Избегать контекста .main ul {} .sidebar ul{} • Модифицировать сам объектMonday, February 25, 13
  18. 18. Избегать контекста .main ul {} .sidebar ul{} • Модифицировать сам объект .mainNav {} .subNav {}Monday, February 25, 13
  19. 19. Вёрстка по модулям • Разбить сайт на области и верстать их как отдельные элементы «в себе»Monday, February 25, 13
  20. 20. Monday, February 25, 13
  21. 21. Monday, February 25, 13
  22. 22. Monday, February 25, 13
  23. 23. Monday, February 25, 13
  24. 24. Monday, February 25, 13
  25. 25. Monday, February 25, 13
  26. 26. Monday, February 25, 13
  27. 27. Раньше так: div#myBlockMonday, February 25, 13
  28. 28. Обычный блок div#myBlock h2 #myBlock h2{...} #myBlock ul{...} #myBlock p{...} ul #myOtherBlock ul{...} #myOtherBlock li{...} pMonday, February 25, 13
  29. 29. Спустя неделю «Ой, а давайте в погоде сделаем список как в блоке аналитики?» «А еще, нам нужно два таких блока, только с разным фоном»Monday, February 25, 13
  30. 30. Fail h2 #myModule h2{...} #myModule span{...} ul Приведет #saleModule{...} коду #myModule к грязному #myOtherModule ul{...} #myOtherModule li{...} pMonday, February 25, 13
  31. 31. Правильный подход .block .heading .block{...} .heading{...} .list .list{...} .more{...} .moreMonday, February 25, 13
  32. 32. Модифицируем блокиMonday, February 25, 13
  33. 33. Модифицируем блоки ul.list ul.list .with-imageMonday, February 25, 13
  34. 34. И?Monday, February 25, 13
  35. 35. h2.heading h2.heading h2.heading ul.switcher ul.list ul.list ul.list .with-image .more .moreMonday, February 25, 13
  36. 36. Facebook • Очень много простых стилей • Комбинации классов • Вы еще думаете о семантике классов? :)Monday, February 25, 13
  37. 37. Monday, February 25, 13
  38. 38. Читать • https://github.com/stubbornella/oocss/wikiMonday, February 25, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×