13
Признаки хорошего кода Что делает ваш код хорошим и почему его нужно делать таковым?

Frontendlab: Признаки хорошего кода - Роман Братченко

Embed Size (px)

Citation preview

Page 1: Frontendlab: Признаки хорошего кода - Роман Братченко

Признаки хорошего кода

Что делает ваш код хорошим и почему его нужно делать таковым?

Page 2: Frontendlab: Признаки хорошего кода - Роман Братченко

Свойства хорошего кода:

1. Работоспособность2. Гибкость3. Скорость4. Поддержка

Page 3: Frontendlab: Признаки хорошего кода - Роман Братченко

Работоспособность

1. Решает задачу клиента2. Позволяет продать продукт3. Сильный аргумент в споре

1. Не зависит от качества кода2. Является необходимым минимумом

Page 4: Frontendlab: Признаки хорошего кода - Роман Братченко

Гибкость

1. Наиболее важный признак хорошего кода2. Баланс: простота или универсальность3. Структура: модульность и гибкая основа4. HTML: поиск простого решения5. CSS: лучший подход на сегодня

Page 5: Frontendlab: Признаки хорошего кода - Роман Братченко
Page 6: Frontendlab: Признаки хорошего кода - Роман Братченко
Page 7: Frontendlab: Признаки хорошего кода - Роман Братченко

Пример того, как могло бы быть<nav class=”nav-calendar”>

<a class=”nav-calendar-item”>январь</a><a class=”nav-calendar-item”>февраль</a><a class=”nav-calendar-item”>март</a>...

</nav>

Page 8: Frontendlab: Признаки хорошего кода - Роман Братченко

гибкая структура и планирование дальнейшего развития

Page 9: Frontendlab: Признаки хорошего кода - Роман Братченко
Page 10: Frontendlab: Признаки хорошего кода - Роман Братченко

Как должно быть<ul>

<li class=”service”><h2 class=”service-header”>Mental Training</h2><p class=”service-text”><img src=”...”>... <a

href=”...”></a></p></li>…

</ul>

Page 11: Frontendlab: Признаки хорошего кода - Роман Братченко

.nav .item a {...}

Page 12: Frontendlab: Признаки хорошего кода - Роман Братченко

Поддержка

1. Понять ближнего своего2. Верстаем по стандартам w3c3. Решение задачи важней технологий4. Используем теги по назначению 5. Понятные названия классов

Page 13: Frontendlab: Признаки хорошего кода - Роман Братченко

Скорость

1. сокращаем DOM2. быстрые CSS-селекторы3. оптимизируем изображения4. сокращаем количество запросов5. соблюдаем стандарты