SlideShare a Scribd company logo
Структурированный и гибкий
объектно ориентированный CSS


Иванова Виктория
Frontend Developer
КАК ОБСТОЯТ ДЕЛА.
    main.css
ИДЕЯ.

• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
РЕАЛИЗАЦИЯ.

    ООP

  ООCSS
OOP. ПОДХОД.
Наследование
Полиморфизм
Инкапсуляция
Составные части системы
ООP.
•   Наследование
ООP.
•   Наследование
ООP                OOCSS
•   Наследование
ООP                OOCSS
•   Наследование
ООP                OOCSS
•   Наследование
ООP                OOCSS
•   Наследование

    ДУБЛИРОВАНИЕ
СВЕРИМ ПЛАН ?
• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
ООP.
•   Полиморфизм
ООP.
•   Полиморфизм
ООP               OOCSS
•   Полиморфизм
ООP               OOCSS
•   Полиморфизм
ООP               OOCSS
•   Полиморфизм
ООP               OOCSS
•   Полиморфизм
СВЕРИМ ПЛАН ?
• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
ООP.
•   Инкапсуляция
ООP.
•   Инкапсуляция
ООP                OOCSS
•   Инкапсуляция
ООP                OOCSS
•   Инкапсуляция
ООP                OOCSS
•   Инкапсуляция
ООP                OOCSS
•   Инкапсуляция
СВЕРИМ ПЛАН ?
• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
ООP
Компоненты системы
ООP                OOCSS
      КОМПОНЕНТЫ
        СИСТЕМЫ
ООP                OOCSS
      КОМПОНЕНТЫ
        СИСТЕМЫ
ООP                          OOCSS
                   КОМПОНЕНТЫ
                     СИСТЕМЫ


.product-catalog
ООP                           OOCSS
                    КОМПОНЕНТЫ
                      СИСТЕМЫ


.product-catalog_list
ООP                           OOCSS
                    КОМПОНЕНТЫ
                      СИСТЕМЫ


.product-catalog_grid
ООP                OOCSS
      КОМПОНЕНТЫ
        СИСТЕМЫ
ООP                OOCSS
      КОМПОНЕНТЫ
        СИСТЕМЫ
ООP                OOCSS
      КОМПОНЕНТЫ
        СИСТЕМЫ
СВЕРИМ ПЛАН ?
• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
МОДУЛЬНОСТЬ
МОДУЛЬНОСТЬ
Контент
Контейнер
МОДУЛЬНОСТЬ
Контент
Контейнер
МОДУЛЬНОСТЬ
• Reset.css
• Init.css
• Layout.css
• Blocks.css
СВЕРИМ ПЛАН ?
• Отсутствие дублирования
• Гибкость
• Структурированность
• Повторное использование
• Модульность
ПРЕИМУЩЕСТВА
ПРЕИМУЩЕСТВА
• Меньше строк кода CSS
• Чище разметка
• Семантика для SEO
• Масштабируемость
• Гибкость
• Командная работа
РИСК.
РИСК.
Только большие проекты
Поддержка и создание библиотек
Наличие документации
Гибкость и Структурированность Oбъектно Oриентированноя CSS
ВОПРОСЫ.
Гибкость и Структурированность Oбъектно Oриентированноя CSS

More Related Content

PPTX
Oracle Service Bus
PDF
Manifest of modern engineers
PDF
User Behavior: Interacting With Important Website Elements
PPT
Frontend Servers and NGINX: What, Where and How
PDF
Management and Communications (IPAA)
PDF
Getting to know magento
PPTX
IGears: Template Architecture and Principles
PDF
QA evolution, in pictures
Oracle Service Bus
Manifest of modern engineers
User Behavior: Interacting With Important Website Elements
Frontend Servers and NGINX: What, Where and How
Management and Communications (IPAA)
Getting to know magento
IGears: Template Architecture and Principles
QA evolution, in pictures

Viewers also liked (20)

PDF
Seo and Marketing Requirements in Web Architecture
PPT
External Widgets Performance
PDF
Databases on Client Side
PDF
Unexpected achievements 2013
PDF
PPT
Психология восприятия и UX дизайн
PPT
Правила хорошего SEO тона в Frontend разработке
PDF
QA evolution to the present day
PPT
Mastering Java ByteCode
PDF
Developing for e commerce is important
PDF
PDF
Quick Intro to Clean Coding
PPT
Эффективный JavaScript - IQLab Frontend Fusion 2012
PDF
Lupan big enterprise ecommerce fusion 2013
PPT
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
PDF
non-blocking java script
PDF
Speed Up Your Website
PDF
Testing schools overview
PPT
Доступность веб-сайтов: WWW для всех?
Seo and Marketing Requirements in Web Architecture
External Widgets Performance
Databases on Client Side
Unexpected achievements 2013
Психология восприятия и UX дизайн
Правила хорошего SEO тона в Frontend разработке
QA evolution to the present day
Mastering Java ByteCode
Developing for e commerce is important
Quick Intro to Clean Coding
Эффективный JavaScript - IQLab Frontend Fusion 2012
Lupan big enterprise ecommerce fusion 2013
Модульные сетки в реальном мире - IQLab Frontend Fusion 2012
non-blocking java script
Speed Up Your Website
Testing schools overview
Доступность веб-сайтов: WWW для всех?
Ad

Similar to Гибкость и Структурированность Oбъектно Oриентированноя CSS (7)

PPTX
Методологии верстки
PPTX
A вы верите в систематизацию
PPTX
Отполифиль свой CSS - MinskCSS 2
PPTX
Построение собственного JS SDK — зачем и как?
PDF
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
PDF
MySQL InnoDB Cluster
Методологии верстки
A вы верите в систематизацию
Отполифиль свой CSS - MinskCSS 2
Построение собственного JS SDK — зачем и как?
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
MySQL InnoDB Cluster
Ad

More from Ecommerce Solution Provider SysIQ (8)

PDF
Developing for e commerce is important
PDF
PDF
Scalability and performance for e commerce
PPT
Interactive web prototyping
PPT
Модульные сетки в реальном мире
PPT
Understanding Annotations in Java
Developing for e commerce is important
Scalability and performance for e commerce
Interactive web prototyping
Модульные сетки в реальном мире
Understanding Annotations in Java

Гибкость и Структурированность Oбъектно Oриентированноя CSS