Css правила написания: CSS — правила оформления кода

Ни дочерние, ни селекторы потомков не являются плохими по своей природе. На самом деле, они хорошо работают, чтобы ограничить область применения правил CSS. Однако они далеки от идеала, потому что разметка иногда меняется.

Поднимите руку, если вы когда-либо сталкивались со следующим. Вы разработали несколько шаблонов для клиента, и ваш CSS использует селекторы потомков и потомков в нескольких местах. Большинство этих потомков и потомков также являются селекторами элементов, поэтому такие селекторы, как .promo > h3 и .media h4 , присутствуют во всем коде. Ваш клиент также нанял SEO-консультанта, который просмотрел вашу разметку и предложил изменить элементы h3 и h4 на 9 элементов.Элементы 0037 h2 и h3 . Проблема в том, что мы также должны изменить наш CSS.

И снова селекторы классов раскрывают свое преимущество. Использование .promo > .headline или .media .title (или проще . promo-headline и .media-title ) позволяет нам изменить нашу разметку без необходимости изменения нашего CSS.

Конечно, это правило предполагает, что у вас есть доступ к разметке и контроль над ней. Это может быть не так, если вы имеете дело с устаревшей CMS. В таких случаях уместно и необходимо использовать селекторы потомков, потомков или псевдоклассов.

Примечание: более архитектурно обоснованные правила CSS

Филип Уолтон обсуждает эти и другие правила в своей статье «Архитектура CSS». Я также рекомендую сайт Гарри Робертса «Рекомендации по CSS» и пост Николаса Галлахера «О семантике HTML и архитектуре внешнего интерфейса», чтобы узнать больше об архитектуре CSS.

Теперь мы рассмотрим две методологии для архитектуры CSS. Оба метода были созданы для улучшения процесса разработки для больших сайтов и больших команд; однако они работают так же хорошо для команд из одного человека.

AdvancedCSSbookCSSexcerpthtml

Советы экспертов о том, как писать чистый и эффективный код CSS

Написание чистого и эффективного кода CSS — это искусство. В CSS есть чему поучиться, например свойствам, элементам, атрибутам, значениям и многому другому, чтобы писать хорошо структурированный и соответствующий стандартам код.

На самом деле у большинства разработчиков не всегда есть возможность разработать проект с нуля. Большую часть времени они получают уже написанные проекты, и именно тогда они осознают важность чистого кода. По этой причине вам как разработчику необходимо сначала понять исходный код, чтобы продолжить работу над проектом. Если код написан не на должном уровне, вам придется потратить гораздо больше времени, чем обычно, чтобы добиться цели.

Однако для того, чтобы писать хороший код CSS, необходимо знать, как лучше начать писать код. Итак, вот несколько советов, рекомендованных экспертами, которые помогут вам начать.

Начните с фреймворка

Рекомендуется использовать фреймворк CSS с каждым дизайном, так как это ускорит производство. У некоторых дизайнеров есть собственная структура, которую они создают с течением времени, что помогает им поддерживать согласованность в проектах.

Однако этот шаг рекомендуется только тем дизайнерам, которые уже знают HTML 9.0325 Кодирование CSS. Однако в какой-то момент вам придется создать определенный аспект макета самостоятельно, и краткое понимание CSS поможет вам легко это сделать.

Сброс CSS

Некоторые дизайнеры могут возразить, что сброс CSS — это ненужный шаг. Но это помогает начать работу с чистой базы, упрощая стиль вашего сайта с более предсказуемыми результатами в конце.

Он переопределяет стили браузера по умолчанию. Вы можете использовать один из множества сбросов, доступных в Интернете, их комбинацию или даже написать свой собственный.

Поддерживайте согласованность

Независимо от того, как вы пишете код CSS в HTML или как вы добавляете свойства, важно поддерживать согласованность во всем коде. Многие дизайнеры предпочитают упорядочивать свои свойства в алфавитном порядке, в то время как многие другие используют логический подход, например, упорядочивание элементов по типу или выравниванию. Это полностью зависит от вас, как вы хотите это сделать, но суть в том, что вы придерживаетесь порядка, чтобы потом было легко найти что-то.

Вы также можете разработать собственный подъязык CSS, который позволит вам быстро называть вещи. Вы можете создавать определенные классы почти для каждой команды и каждый раз использовать одно и то же имя.

Убедитесь, что он удобочитаем

Еще один невероятно важный аспект написания безупречного кода CSS — обеспечить его удобочитаемость. Это упрощает его обслуживание в будущем и позволяет находить элементы за считанные секунды.

Избегайте тега !important

Тег !important имеет свое место, но дизайнеры часто используют его в отчаянии, когда что-то идет не так. Правда в том, что нам нужно использовать этот тег очень редко.

Чрезмерное использование тега !important создает эффект домино, который вскоре превращается в кошмар обслуживания.

Вот что происходит, когда код CSS не работает должным образом. Разработчики применяют важную задачу, чтобы заставить ее работать. Что здесь происходит, так это то, что этот тег предлагает самую высокую специфичность для очень многих по сравнению с тем, что действительно требуется. Делая это, вы приказываете браузеру применять правило при любых обстоятельствах. Это не очень хорошо, потому что правила CSS отличаются от одного выбранного к другому или говорят родительский селектор к дочернему.

Если вы хотите переопределить важный тег, вам придется использовать другой важный тег, который ведет ко многим другим во всем коде. В конце концов, код вашего проекта будет заполнен важными тегами, которые становится сложнее поддерживать. По этой причине мы рекомендуем вам максимально избегать важного тега.

Держите это СУХИМ

СУХОЙ или не повторяйтесь — это общий принцип разработки программного обеспечения, который направлен на то, чтобы максимально избежать или уменьшить повторение в кодировании HTML CSS, а также в других языках программирования. Чтобы помочь вам понять, вот пример, показывающий разницу.

Мы создадим 3 класса CSS для трех кнопок без использования принципа DRY.

 .основная кнопка {
  фон: белый;
  цвет синий;
  радиус границы: 10px;
  отступ: 15px 25px;
  выравнивание текста: по центру;
  размер шрифта: 15px;
}
.form-кнопка {
  фон: белый;
  цвет: зеленый;
  радиус границы: 10px;
  отступ: 15px 25px;
  выравнивание текста: по центру;
  размер шрифта: 15px;
}
.cancel-кнопка {
  фон: белый;
  красный цвет;
  радиус границы: 10px;
  отступ: 15px 25px;
  выравнивание текста: по центру;
  размер шрифта: 15px;
}
 

Далее мы будем создавать такие же кнопки по принципу DRY.

 .кнопка {
  цвет: желтый;
  радиус границы: 10px;
  отступ: 16px 21px;
  выравнивание текста: по центру;
  размер шрифта: 15px;
}
.основная кнопка {
  фон: оранжевый;
}
.form-кнопка {
  фон: синий;
}
.cancel-кнопка {
  фон: зеленый;
}
 

Вы можете заметить, что, применяя принцип DRY, мы уменьшили количество строк кода CSS, тем самым уменьшив повторение и улучшив производительность и читабельность кода.

Правильное использование сокращения CSS

Сокращение CSS позволяет вам устанавливать несколько свойств элемента в одной строке, что в конечном счете экономит место. Весь код загружается быстрее. Но его не следует использовать повсеместно, так как это может нарушить столь необходимую ясность, требуемую в коде CSS.

Например: Div может иметь следующие стили.

 #карандаш {
    поле слева: 10px;
    поле справа: 13px;
    поле сверху: 15px;
}
 

Эти стили можно объединить в одну строку, например:

 #crayon {
    поля: 9px 8px 0px 6px; // верхнее, правое, нижнее и левое значения соответственно. 
}
 

Кроме того, когда вам нужно установить только одно или два свойства или нужно что-то переопределить, лучше всего переключиться на обычный текст. Еще один недостаток повсеместного использования сокращенного кода заключается в том, что он сбросит игнорируемые свойства, что вызовет нежелательный эффект.

Использование нескольких таблиц стилей

Вместо создания одной гигантской таблицы стилей рекомендуется создавать несколько таблиц стилей меньшего размера в зависимости от сложности размера и дизайна сайта. Мало того, что ими легче управлять, они также позволяют вам не использовать CSS на страницах, которые в них не нуждаются.

Однако многие дизайнеры следуют этому шаблону на начальном этапе, а затем объединяют их в один файл. Он сокращает количество HTTP-запросов до одного и позволяет кэшировать весь файл на компьютере пользователя.

Добавление отступов и полей ко всем элементам

Старые браузеры имеют тенденцию отображать элементы иначе, чем современные браузеры. Именно по этой причине браузерная версия отображает отступы и поля для всех элементов.

Например, разные версии Internet Explorer отображают файл по-разному. Опять же, Internet Explorer отображает некоторые элементы иначе, чем Chrome и Firefox.

Кроме того, если вы еще не используете сброс, вам придется определить отступы и поля для всех элементов на странице, чтобы обеспечить безопасность. Для этого выполните глобальный сброс, как указано ниже, что сделает отступы и поля равными 0 для всех элементов, если они не определены другим стилем в таблице стилей.

 * {поле:0;заполнение:0;}
 

Неосознанно многие дизайнеры добавляют дополнительные селекторы к коду CSS , который украшает таблицу стилей. Самый распространенный пример добавления дополнительного селектора — списки.

 body #container .someclass ul li {....}
 

В приведенном выше примере мы могли бы просто использовать следующий оператор.

 .someclass li {. ..}
 

Рекомендуется избегать их, чтобы код CSS был максимально простым и понятным.

Используйте возможности списка

Список — это идеальный способ представления данных в структурированном формате, стиль которого можно легко изменить. Вам даже не нужно использовать список в качестве текстового атрибута, присвоенного его свойству отображения.

Они также являются отличным способом создания навигационных меню и других подобных вещей. Что касается новичков, то стоит узнать о списке для перечисления элементов для структурирования данных в будущем.

Используйте несколько классов

Для лучшего понимания кода CSS рекомендуется добавлять к элементу несколько классов. Давайте получим подробное понимание на простом примере.

Предположим, что у вас есть блок div, который вы хотите переместить влево. Учитывая, что у вас уже есть класс .left в вашем коде CSS, который перемещает все влево. Итак, добавив в объявление дополнительный класс, вот что вы можете сделать.