Стажировка-2014

Code conventionsand best practices

Стажировка-2014

Красивая картинка о том, каким должен быть ваш код

http://rhr.me/pres/mcss/

Стажировка-2014

Имена CSS селекторов

Стажировка-2014

Имена CSS селекторов

<div class=‘user_login’><div class=‘userLogin’><div class=‘UserLogin’>

Правильно: <div class=‘user-login’>

Стажировка-2014

Имена CSS селекторов

Ещё примеры неудачных селекторов:

form#tb3div#divmenu

.row1

.row2#Menu2

Стажировка-2014

Имена CSS селекторов

Хорошей практикой является использование соглашений, принятые в языке программирования/разметки.

Стажировка-2014

Имена CSS селекторов

… или соглашений, принятых в команде

Стажировка-2014

Пример CSS классов поЯндекс БЭМ

class=“sub-menu__search search_state_current”

Стажировка-2014

Методологии, стайлайды

Yandex БЭМ (Яндекс)MCSS (Одноклассники)

SMACSS

Google, Github, Mozilla style guides

WC3 RecommendationsIdiomatic CSS, JSLint, etc…

Стажировка-2014

Руководство по

форматированию CSS

http://habrahabr.ru/post/149986/

http://codeguide.co/

Стажировка-2014

Префиксы JS

<form class=‘feedback’>

css:.feedback { margin: 5px; }

.js:$(‘.feedback’).click(function(){

// code})

Стажировка-2014

Префиксы JS

<form class=“feedback js-popup”>

css:.feedback { margin: 5px; }

.js:$(‘.js-popup’).click(function({// code

})

Стажировка-2014

inline-css и js

<!-- bad --> <div style=“float: left;”><p style=“color: black;”>

</div>

Стажировка-2014

inline-css и js

•HTML код трудночитаем•Дублирование стилей для разных элементов, дублирование стилей для разных html-файлов.•Сложно переопределить свойство: стили, указанные в атрибуте style имеют наивысший приоритет.

Стажировка-2014

Приоритет применения стилей к элементам

.html:<div class=“cool” style=“color: red;”>

.css:

.cool {color: black;

}

Стажировка-2014

Производительность CSS селекторов

section .news a {color: red;

}

<section><div class=“news”>

<a class=“social” href=“#”>…</a></div>

</section><a href=“#”>…</a>

a.social {color: red;

}

Стажировка-2014

Производительность CSS селекторов

Браузер выполняет поиск элементовсправа налево:

section ⟵ .news ⟵ a

Стажировка-2014

Производительность CSS селекторов

Поэтому, нужно стараться избегать селекторов, где целевой объект – тэг

без класса или id

.news a.socialлучше, чем

.news a и .news *

Стажировка-2014

Особенности italic шрифтов

Важно: Если рукописное начертание шрифта отсутствует, браузер отрендерит italic начертание путём наклона Normal-версии шрифта.

Стажировка-2014

Особенности italic шрифтов

Важно: Если рукописное начертание шрифта отсутствует, браузер отрендерит italic начертание путём наклона Normal-версии шрифта.