Как было сказано в моей предыдущей статье “7
вещей которые вы должны знать при создании сайта”, я решил приобщить к делу
моего приятеля Джона Оверола, дизайнера WordPress и
эксперта CSS.
И вот на что он посоветовал обратить внимание:
1. “CSS вцелом
очевидный и логичный язык в своем большинстве, но он базируется на иерархии, а
на это всегда следует обращаться внимание”
“Когда страница создана, CSS применяеся для каждого отображаемого элемента. Вы можете применять
множественные правила для одного элемента, и это учитывается для всех страниц.
Например, задан стандартный элемент описывающий размер шрифта для заголовка, но
он может быть измененен для каждого элемента в отдельности.”
2. “Как применяется CSS к ближайшему элементую Что бы понять это давайте представим, что у
нас есть заголовок H2, а
также есть параграф P. И
если тэг параграфа является ближайшим к тексту, то этот иэг переопределит тэг H2 и сделает текст меньше.”
3. Натан: “Когда то давным давно я просматривал мои файлы для темы
Genesis с
помощью Google resources и
увидел сообщение, которое говорило что слишком много CSS файлов,
что должен быть только один. Ты можешь это прокоментировть?”
Джон: “Да, они ссылаюстся на вызов различных CSS файлов.
Этого сложно избежать в WordPress, потому
что для темы необходим отдельный CSS файл, плагин также может иметь файл CSS. Конечно вы можете скомбнировать эти
файлы и для каждого плагина вручную все стили поместить в один главный CSS файл
темы, но как только плагин обновится, то вероятно изменения коснуться и CSS, а это не будет отражено в
вашем CSS. Да и вообще это может
сломать ваш сайт.”
“Google вам
говорит не исопльзовать больше одного CSS файла, но уже сегодня это невозможно сделать практически для
любого дизайна, несмотря на то что у WordPress есть собственный фалй CSS.”
Заметка: Место где вы можете почитать о вашем сайте это Google PageSpeed Insight. C помощью
этого инструмента вы можете вводить URL и по нему получать информацию о том насколько хорошо ваш сайт
выполняется, и есть ли какие либо проблемы, что за они и как изх можно испавить.
Одной из главной проблемой является необходимость минимизации CSS, о которой я напишу позже в
данной публикации.
Описанное выше – это базовая информация о минимизации вашего CSS файла.
В дополнение вы можете прочитать о минимизации
CSS, JavaScript и HTML.
4. “Одна вещь которая может быть сделана с файлами CSS это их
минимизация. Это означает удаление всех пробелов, табуляций и прочих служебных
символов – все это обыконовенные символы, которые влияют на размер файла. Данная
операция сделает текст внутри этого файла одной строкой, и это порой может
привести что загрузка файла будет осуществлятся быстрее”
“Обратная сторона этого процесса, это ухудшение читабельности файла. Особенно
остро проблема будет стоять если вам нужно что то отредактировать. Это будет
серьезным испытание для вас, поверьте.”
5. “Иерархия в CSS позволяет делать правильный выбор стилей в нужное время, и это
очень сильно отличается от темы к теме, и от того как вы создаете свой сайт”
“В CSS существует тэг important. Он
позволяет переопределить стиль элемента вне зависимости от того где он
находится в иерархиию Часто он используется слишком много.”
“Когда вы проссмотриваете ваш CSS файл со
сложной структурой CSS, иногда
бывает сложно определить что к чему относится. Это происходит изза того, что
некоторые разработчики создают стиль для элемента, и добавляют important. Таким образом эти
стили всегда применяются, вне зависимости от того что происходит. Проблема
здесь заключается в том, что таким образом можно поломать все остальную CSS структуру.”
“CSS – это структура,
которая применяется везде. И пока вы исправльяете стиль в одном месте, вы не
обращаете внимание на другой фрагмент где этот стиль так же может
использоваться, где изза ваших изменений страница можеть сломаться. Это
основная проблема CSS – всегда определяйте для чего ваш стиль будет применятся.”
6. “О классах и ID. Идентификаторы
обычно прпименяются для всей секции div а
классы обычно применяются для конкретных элементовю Тэг div – это контейнер.
Если вы посмотрите на типичный вебсайт, то увидите что он состоит из блоков.”
“Например ваша домашняя страница – http://NathanSegal.info.Вверху имеется
заголовок и меню. Это все находится в сером контейнере в заголовке страницы. Это все
и есть тэг div, и к нему и применяется CSS.”
“У вас стили применятеся в для нескольких элементов. Например
стиль который применятеся к Nathan Segal в
заголовке и стиль который применятеся к элементам меню. Внутри меню есть еще один
div, который и содержит все элементы.
То есть каждый элемент меню находится внутри контейнера внутри контейнера
внутри контейнера. Это показывает как работаеn CSS. Вы создаете контейнер и применяете
к нему стили CSS. После этого вы размещаете
что то внутри контейнера, таким образом добавляете еще один контейнер, и
применяете стили и к нему. А внутри того контейнера – еще контейнеры для
каждого элемента меню в отдельности. ”
7. “Для того что бы можно было управять каждым элементов, все
должно иметь свое уникальное имя. В вашем сайте, кто делал некоторые изменения.
Все эти имена нестандартны (тема OptimizePress). Они
имеют собственную нотацию имен, что хорошо. Каждый провайдер имеет свою нотацию
имен для своих тем. Это порождает некоторые проблемы. Проблемы связанные с тем
что созданием сайта занимаются разные люди и используют произвольные имена.”
