SlideShare ist ein Scribd-Unternehmen logo
1 von 48
Структурированный и гибкий
объектно ориентированный 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

Weitere ähnliche Inhalte

Andere mochten auch

Правила хорошего SEO тона в Frontend разработке
Правила хорошего SEO тона в Frontend разработкеПравила хорошего SEO тона в Frontend разработке
Правила хорошего SEO тона в Frontend разработке
Ecommerce Solution Provider SysIQ
 

Andere mochten auch (20)

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

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

Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?
buranLcme
 
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyleЗачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyle
Yandex
 

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

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

Mehr von Ecommerce Solution Provider SysIQ (8)

All things php
All things phpAll things php
All things php
 
Developing for e commerce is important
Developing for e commerce is importantDeveloping for e commerce is important
Developing for e commerce is important
 
Magento code audit
Magento code auditMagento code audit
Magento code audit
 
Scalability and performance for e commerce
Scalability and performance for e commerceScalability and performance for e commerce
Scalability and performance for e commerce
 
Going Global
Going GlobalGoing Global
Going Global
 
Interactive web prototyping
Interactive web prototypingInteractive web prototyping
Interactive web prototyping
 
Модульные сетки в реальном мире
Модульные сетки в реальном миреМодульные сетки в реальном мире
Модульные сетки в реальном мире
 
Understanding Annotations in Java
Understanding Annotations in JavaUnderstanding Annotations in Java
Understanding Annotations in Java
 

Kürzlich hochgeladen

СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
Хроники кибер-безопасника
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
Хроники кибер-безопасника
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
Ирония безопасности
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
Хроники кибер-безопасника
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
Хроники кибер-безопасника
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Ирония безопасности
 

Kürzlich hochgeladen (9)

Ransomware_Q3 2023. The report [RU].pdf
Ransomware_Q3 2023.  The report [RU].pdfRansomware_Q3 2023.  The report [RU].pdf
Ransomware_Q3 2023. The report [RU].pdf
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
 
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdfMalware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
 
MS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdfMS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdf
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
 

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