5 способов писать CSS код лучше


Содержание

CSS-Библия — 15 правил, которые должен знать каждый дизайнер

Как написать правильный CSS-код?

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

Ниже смотрите 15 золотых правил для написания удобного и профессионального CSS-кода

1) Используйте CSS-Reset

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

Вот пример CSS-Reset, взятый со страницы http://meyerweb.com/eric/tools/css/reset/index.html

2) Используйте сокращения

К примеру, чтобы писать длинное

мы можем записать коротко:

то есть по часовой стрелке начиная сверху.

В основном сокращают border, margin, padding, font и background.

подробней об этом вы можете посмотреть тут

А вот цвета можно сокращать так:

Если кода цвета состоит из 3х повторяющихся цифр, то можно записать просто три этих цифры.
На примере: #FFFFFF можно записать как #FFF, или #990055 можно записать #905, а #F091A4 сократить нельзя.

3) Используйте комментарии

Используйте комментарии везде, где следует — они очень помогают упорядочить код, делая его более понятным для себя и для того, кто будет с ним работать

Выглядит это примерно так:

а) Заголовок страницы стилей — пишите кто автор кода и когда он был написан

б) Отмечайте разделы стилей — это упорядочит весь код по разделам.
Например:

в) Комментируйте проблемные места. Например те, где страница может иметь отличия в разных бразуерах.например:

г) Пишите маленькие комментарии тем, с кем работаете — например, когда нужно что-то доработать.

4) Добавляйте Легенду Цветов

На маленьких css-файлах не сложно отслеживать все цвета сайта.
А что делать, если у нас код на 5000 строк? — ведь нельзя допускать использования не тех цветов.
Для этого существует легенда цветов — то есть список тех цветов, которые мы используем в нашем файле. Например:

5) Помним, что такое Position:realtive и Position:absolute

В этих понятиях путается большинство начинающих верстальщиков, но есть правило, которое позволяет избежать путаницы.

Position:absolute позиционирует объект относительно страницы — и неважно, где он расположен в HTML-потоке. По умолчанию это значение 0 слева и 0 сверху.

Обычно этот вариант не используется — ибо неудобен и ограничен в опциях. А вот что вам пригодиться — если задать родителю («обёртке») нашего элемента Position:realtive, то Position:absolute будет выравниваться уже Относительно верхнего левого угла родителя. Так что можете проставлять это свойство по-необходимости. Наглядно на картинке:

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

Порой такие браузеры, как IE6 и IE7 просто вынуждают нас использовать хаки. Хаки — сразу ошибка для валидатора. Так что выносите из в специальные css-файлы для каждого браузера.
Специальные записи для хаков каждому браузеру и как их выносить в отдельные файлы можно посмотреть тут

7) Используйте Margin’ы в описании расположения

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

Идея следующая: вместо использования padding’а у родителя, мы используем margin для дочерних-элементов. Так, вместо

Ничего неправильно в использовании padding’а, но опыт показывает, что лучше всё же margin

8) Используйте float’ы

Если вы ходите приписать элементу float, то его родителю пишите overflow:hidden

Без этого свойства элемент может обтекаться некрасиво — также проблемы могут возникнуть при задании margin’ов или border’ов.

Если вы хотите, чтобы элемент не обтекался — указываем clear:both ниже обтекаемого элемента. Часто это используют вместо overflow: hidden;

9) Добавляем display:inline для float-элементов

Довольно известная проблема в IE6 с удваиванием margin’ов у float-элементов. То есть если нам нужно 20px, то приходится писать 10px, ибо этот отступ удваивается. Хотя IE6 уже приказывает долго жить, и многие дизайнеры не тратят время на то, чтобы оптимизировать сайт под него, всё же небольшой кусочек кода сделает отображение в нём приятней. Итак, ставим

для элемента, к которому применён float

10) Делаем спрайтами жизнь комфортнее

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

Если знаете английский, то вот статья о них

11) Структура файлов сайта должна быть понятной

Потратьте время на то, чтобы сделать структуру сайта понятной. Раскидайте всё по полочкам.
Например:

Здесь «Website Name» — имя сайта, с которым мы работаем. Эта папка содержит HTML-файлы для сайта, плюс папки assets и styles.
В папке assets содержаться файлы, которые можно скачать с сайта, например, архивы или PDF-файлы. В папке styles содержаться, в свою очередь, папки css, images, javascript.

  • css — содержит все файлы css, например, reset.css, layout.css и main.css
  • images — все картинки сайта. Эту папку тоже можно разбить по разделам.
  • javascript — все javascript-файлы.

Эта схема приблизительна, и можно её отображать по-разному. Мысль в том, что она помогает вам рабоать быстрее и делает сайт понятнее и аккуратнее.

12) Разверните стили

Необязательный совет — Название классов и id стилей лучше писать, соблюдая древовидность, чтобы всё было понятно и наглядно.

13) Используйте пиксели а не относительные величины

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

Проблема относительных величин — в передаче этой относительности.
Чтобы было понятно, разъясню на примере:

body < font-size: 62.5% >значит font-size: 1em, то есть 10px.

Если #blog-content нужен 14px, прописываем:

Теперь если H3 тег внутри #blog-content нужен нам 20px, то его можно было бы задать так:

Всё бы хорошо, но у нас действует относительность. И эти 2.0em применяются к 1.4em
#blog-content’a
, и в итоге, размер мы получим 28px.

Так что используйте фиксированные величины.

14) Ограничивайте псевдо-классы якорными тегами

Новые браузеры не имеют данной проблемы, всё упирается в ряд старых браузеров во главе с IE6.
Проблема заключается в том, что в старых браузерах псевдо-классы (такие как:hover) работают только применительно к тегу a, тоесть

не работает в IE6

Эта проблема устраняеться с jQuery

15) Избегайте проблем с селекторами

Используйте селекторы где это возможо

Например, используйте вместо

Будьте осторожны с группировкой селекторов

Ведь тут могут неправильно сыграть относительные величины, если вы их используете

Если на это примере всё в порядке,

То на этом — будьте внимательны с относительными величинами.


И напоследок

Чтобы написать успешный код, избегайте постоянного оборачивания одного в другое и тд.
Учите теги h1, ul и p.
Ключ к успеху прост — это практика, практика, практика

5 способов писать CSS код лучше

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

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

Этот пост предназначен для объединения 20 лучших советов и трюков, которые вам, вероятно, понадобятся на ежедневной основе при создании маркетинговых активов.

1. Круглые углы без изображений

Вот простая методика CSS округления углов DIV с использованием некоторых атрибутов css. Этот метод будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Этот метод не будет работать в Internet Explorer.

Для округления определенного угла, как вверху слева или внизу справа, используйте таблицу стилей ниже.

2. Создайте специальную таблицу стилей IE

Создайте отдельную таблицу стилей и включите ее на веб-странице всякий раз, когда клиент использует Internet Explorer.

3. Фоновое изображение текстового поля

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

4. Установка минимальной ширины страницы

Очень удобная команда CSS, которая существует, это команда min-width, в которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.

Затем мы создаем наши команды CSS, чтобы создать минимальную ширину 600 пикселей:

#container <
min-width: 600px;
width:expression(document.body.clientWidth 5. Прозрачность кросс-браузера

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

6. Запретить прокрутку Firefox Scrollbar Jump

В Firefox не отображается полоса прокрутки, если содержимое страницы соответствует высоте браузера. Но если контент растет, Firefox отображает полосу прокрутки, выполняя скачок прокрутки. Содержимое экрана будет сдвинуто влево. Чтобы этого избежать, мы можем сказать, что Firefox по умолчанию добавляет полосу прокрутки.

7. Поворот текста с помощью CSS

Этот пример поворачивает текст на 90 градусов против часовой стрелки.

Свойство вращения фильтра BasicImage Internet Explorer может принимать одно из четырех значений: 0, 1, 2 или 3, которые будут вращать соответственно элементы 0, 90, 180 или 270.

.rotate-style <
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: prog >>

8. CSS для мобильных устройств

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

Следующая команда используется для вызова документа CSS для карманных компьютеров:

Цукерберг рекомендует:  Jquery - Скрытие элементов списка через jQuery

9. Изменить цвет выделения текста

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

/* Mozilla based browsers */
::-moz-selection <
background-color: #FFA;
color: #000;
>

/* Works in Safari */
::selection <
background-color: #FFA;
color: #000;
>

10. Удалите пунктирные границы

Пунктирные границы вокруг ссылок — это функция доступности, доступная большинству браузеров по умолчанию.

11. Центрирование веб-сайта

Большая часть веб-сайта использует этот метод для центра контента.

7 советов по написанию удобного CSS-кода

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

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

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

А теперь перейдем к делу.

7 результативных советов по написанию удобного для чтения и редактирования CSS-кода.

Совет 1. Выберите, как будет выглядеть ваш код и всегда придерживайтесь этого варианта..

Те, кто пишет CSS, по виду написания кода в большинстве своем разделяются на две группы:

    Первая группа — это те, кто пишут весь код селектора в одну линию.

Такой код более оптимизирован, весит меньше, а также занимает меньше строчек, благодаря чему он очень удобен в плане навигации по файлу стилей (не приходится прокручивать огромное полотно, чтобы найти нужный элемент кода). Но для того, чтобы быстро находить нужные свойства в таком варианте, нужно сначала научиться ориентироваться в нем.

Вторая группа — это те, кто каждому свойству отводит свою собственную строчку.

Такой код менее оптимизирован, файл, содержащий код такого вида, больше весит по сравнению с первым вариантом, но зато он более нагляден, здесь найти нужное свойство не составит труда. И в то же время он не так удобен в плане навигации по всему файлу стилей (приходится долго отматывать, чтобы найти нужную строчку).

Обе эти группы правы по-своему. Просто помните о том, что вам нужно выбрать тот способ, который нравится и будет удобен именно вам. Это самое главное.

Совет 2. Постоянство в названиях элементов.

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

Сейчас объясню, что конкретно я имею ввиду.

Например, каждый раз, когда я работаю с файлами стилей для разных проектов, для блоков с определенными функциями, я даю названия соответственно их предназначению (если это левый сайдбар, то я его называю sidebar-left, если это название для блока с логотипом — logo и т.д.)

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

Совет 3. Организуйте свой код по принципу «от верха к низу».

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

  1. Общие классы (body, a, p, h1, ul, li и т.д.)
  2. Основные блоки сайта (структура)
  3. Шапка сайта
  4. Меню
  5. Контент
  6. Сайдбар и виджеты
  7. Подвал

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

Совет 4. Объединяйте элементы по одинаковым свойствам.

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

Например, для элементов, которые имеют один и тот же цвет текста и шрифт:

А позже вы сможете добавить уже конкретные свойства для каждого из них, выписав их по отдельности.

Совет 5. Комментируйте свой код.

Замечательной особенностью CSS (наряду с другими языками программирования) является возможность комментировать свои записи, используя знак /* перед комментарием и знак */ после комментария:

Такие комментарии будут служить для вас верными якорями при чтении и редактировании кода.


Совет 6. Применяйте знание алфавита.

Располагайте свойства для каждого элемента по алфавиту.

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

Совет 7. Будьте аккуратны.

Еще один совет — будьте аккуратны, старайтесь, чтобы написанный вами код всегда смотрелся ровно и красиво, чтобы в нем не было лишних и непонятных отступов, или наоборот, «наездов» одного элемента на другой. Самим будет приятно и не стыдно другим показать.

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

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

Просто это ценные советы, которые помогли лично мне привести в порядок мои файлы стилей и организовать мое мышление в этом плане.

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

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

Разбираем CSS-код

Разбираем код языка CSS

В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:

Открыв в браузере файл index.html вы должны увидеть следующее.

В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.

CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами . Сам CSS-код начинается с имени тега, а затем идут фигурные скобки < >, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.

Схема CSS-кода выглядит следующим образом:

После CSS-свойства , нужно обязательно ставить двоеточие : , а после значения точку с запятой ;

Для заголовка h1 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.

Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.

CSS-свойств существует очень много, они изменяют у тегов: цвет, фон, размеры, высоту, ширину, отступы, границы, положение, прозрачность, градиент, округление углов и многое другое (в будущем, каждое CSS-свойство мы рассмотрим отдельно).

Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.

К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.

К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.

В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):

Открыв в браузере, файл index.html вы должны увидеть следующее.

Таким образом, добавляя между фигурными скобками различные CSS-свойства, можно влиять на внешний вид того или иного тега (элемента).

12 Полезных CSS-кодов для WEB-Разработчиков

Согласно Wikipedia, Cascading Style Sheets (CSS) — это язык таблицы стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки. Как наиболее часто используемый для стиля, веб-страниц и интерфейсов, написанных на HTML и XHTML, язык может быть применен к любому виду XML-документа, включая обычный XML, SVG и XUL.

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

Центрирование изображения по вертикали и горизонтали в контейнере

200?’200px’:»+(this.scrollHeight+5)+’px’);»>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video <
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
>

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section <
display: block;
>
body <
line-height: 1;
>
ol, ul <
list-style: none;
>
blockquote, q <
quotes: none;
>
blockquote:before, blockquote:after,
q:before, q:after <
content: »;
content: none;
>
table <
border-collapse: collapse;
border-spacing: 0;
>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>ul li <
color: black;
list-style-type: none;
>

ul li:before <
color: red;
float: left;
margin: 0 0 0 -0.89em;
font-size: 2em;
content: ‘\2022’;
>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>@charset «UTF-8»;
/*
User Submitted Posts — CSS Stylesheet

Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e
This is a complete CSS skeleton of all elements and hooks in the submission form.
Use what you need and then delete any empties to lighten the file.
*/
div#user-submitted-posts <>
div#user-submitted-posts form <>
div#user-submitted-posts fieldset <>
div#user-submitted-posts fieldset label <>
div#user-submitted-posts fieldset input <> /* excludes submit button */

div#user-submitted-posts input <>
div#user-submitted-posts label <>
div#user-submitted-posts textarea <>
div#user-submitted-posts select <>
div#user-submitted-posts option <>

fieldset.usp-name <>
fieldset.usp-url <>
fieldset.usp-title <>
fieldset.usp-tags <>
fieldset.usp-category <>
fieldset.usp-content <>

fieldset.usp-captcha <>
div#user-submitted-posts fieldset.usp-captcha input <>

fieldset.usp-images <>
fieldset.usp-images label <>
div#user-submitted-posts input.usp-clone <>

div#usp-upload-message <>
div#user-submitted-image <>
a#usp_add-another <>

div.usp-input-error <>
div.usp-input-error span <>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>/*****
SCSS CSS 3 Property Maxin v 0.1
by Dele O
*******/

@mixin rounded($radius: 10px) <
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
>

@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) <
-moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft;
border-top-left-radius:$topLeft;
border-top-right-radius: $topRight;
border-bottom-right-radius: $bottomRight;
border-bottom-left-radius: $bottomLeft;
>

@mixin shadow( $off-y, $off-x, $blur, $color) <
-moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
-webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
>

@mixin gradient($baseColor, $toColor) <
background-color:$baseColor;
background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */
background-image: linear-gradient(top,$baseColor, $toColor);
filter: prog );
>

@mixin trasition($property, $duration:0.3s, $function: ease-out) <
-moz-transition: $property $durations $function; /* FF3.7+ */
-o-transition: $property $durations $function; /* Opera 10.5 */
-webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */
transition: $property $durations $function;
>

@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y) <
-moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
>

В чём лучше писать коды HTML?

20.08.2020, 11:31

На чём лучше ? Советы и опыт
Вопрос в следующем: В какой софт-среде лучше писать код ? . Знакомый у меня успешно работает в.

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

Коды символов HTML
Доброго всем дня и ночи! Проблема не значительная, но покоя не дает. На ubuntu установлены.

Цукерберг рекомендует:  Защищаем сайт от спама с помощью Akismet

Дайте HTML коды
Привет. Дайте, пожалуйста, html код аудиоплеера и видеоплеера(flash плеер) для веб-страницы.

Скажите html коды к фонам!
как поменять фон?мне где-то говорили что нужно знать коды!какаие коды?И куда вставить?Что-б .

Заключение. Рекомендации по CSS

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

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

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

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

Может возникнуть ситуация, когда у вас есть набор элементов с почти одинаковыми стилями, которые отличаются лишь одной-двумя строками. К примеру, представьте, что вам нужно создать кнопку .button и использовать ее на странице три раза. Стиль всех кнопок идентичен:

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :


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

Группирование стилей

Если ваша таблица стилей содержит всего десяток правил, то проблем с ее восприятием не возникнет. Но в реальной жизни даже совсем небольшой проект может иметь более 500 строк CSS-кода. И если вы будете записывать все правила подряд, без разбивки на группы, вы очень скоро запутаетесь в своей же работе. Отыскать нужное правило будет сложно, поддержка такой CSS-таблицы превратится в мучение.

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

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

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

Среди преимуществ препроцессоров стоит выделить:

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

Добавление префиксов. В нашем учебнике мы не раз упоминали о необходимости дописывать префиксы производителей к некоторым свойствам. Препроцессор CSS избавит вас от необходимости делать это и добавит все необходимые вендорные префиксы сам.

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

Самые распространенные препроцессоры

, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

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

Правила оформления CSS-кода

1. Синтаксис

1.1 В конце строки должна стоять точка с запятой

После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.

Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой

1.2 Для отступов внутри правил используйте два пробела

Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.

1.3 Значение цветов не сокращается

Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы. Например, #e3e3e3 .

1.4 Все пишется строчными буквами

Вce названия тегов и свойства пишутся строчными буквами.

1.5 Нули не пропускаются

Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5 ).

1.6 Используйте двойные кавычки

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

1.7 Пробел после двоеточия

В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.

1.8 Пробелы после запятой в цветах

После запятых внутри значений rgb() , rgba() , hsl() , hsla() или rect() пробелы ставятся. Это улучшает читаемость.

1.9 Пробел до и после комбинатора

Между селекторами до и после комбинатора (например, p&nbsp>&nbspa ) ставится один пробел.

1.10 Каждое свойство с новой строки

Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.

1.11 Пробел перед фигурной скобкой

После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.

1.12 Закрывающая фигурная скобка на новой строке

Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.

1.13 Опускайте единицы измерения

Единицы измерения не нужно писать там, где без них можно обойтись. Например, border:&nbsp0 .

2. Порядок свойств

Порядок логически связанных свойств должен быть сгруппирован следующим образом:

  1. Позиционирование
  2. Блочная модель
  3. Типографика
  4. Оформление
  5. Анимация
  6. Разное

Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.

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

Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.

3. Имена классов

  • Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel ).
  • Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).
  • Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.


4. Правило @import

Правило @import работает медленнее, чем тег
. В стилях @import использовать не желательно.

5. Варианты шрифта

Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.

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

Порядок шрифтов следующий:

  1. нестандартный шрифт;
  2. веб-безопасный;
  3. тип семейства шрифта.

Как написать хороший HTML & CSS код с помощью Webflow

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

Цукерберг рекомендует:  Node js - Создание сайта

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

Что такое Webflow?

Webflow — это, по сути, пользовательский интерфейс для написания HTML и CSS кода. Интерфейс предоставляет пользователю типичный набор элементов для разметки HTML и панель управления самыми распространенными CSS-свойствами.

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

В Webflow присутствует функция экспорта кода, позволяющая экспортировать код, который вы «пишете», по мере его использования.

К примеру, если я создам следующий макет:

Он будет эквивалентен тому, если бы я написал нижеприведенный код:

Heading

И вы можете наблюдать, что как только я захожу во вкладку “Export Code”, генерируется точно такой же код, что я написал выше. (Обратите внимание, я добавил класс .heading, но об этом немного позже)

Хотя в примере не так заметно, но, поскольку ваши макеты становятся более сложными, перетаскивание элементов и нажатие различных кнопок — куда более быстрый вариант, нежели ввод текста. Благодаря панели управления, такой способ оказывается в разы быстрее и визуально гораздо понятнее. Вот почему на данный момент Webflow — это мой инструмент номер один для «написания» большей части HTML и CSS кода.

Мой процесс работы

Одна из опасностей использования Webflow заключается в том, что, если вы не будете осторожны, можно получить код, содержащий тонну элементов div со слишком большим количеством имен классов. Это может привести к тому, что ваш код будет раздутым, несемантическим и с, так называемым, принципом “WET”(принцип в программировании, который означает “пиши все дважды”, противоположный этому принцип “DRY” означает “не повторяйся ”). Если вы при переходе к стилю элемента в Webflow не дадите ему имя класса, Webflow автоматически присвоит ему имя и применит стиль к имени класса, а не к самому элементу. Помните класс .heading, который я создал ранее? Если бы я не сделал этого, Webflow создал бы его автоматически, вместо применения стиля к

Чтобы избежать этого, нужно начинать проект в Webflow с учетом “лучших практик”. Первое, что я делаю в любом Webflow-проекте — это применяю свои базовые стили к “Style Guide”.

Начните применять стили к “Style Guide” на отдельной странице, например:

Вы можете задать все глобальные и повторно используемые стили для своего сайта. Таким образом, каждый раз, когда вы перетаскиваете элемент (скажем,

Закончив работать над своей “Style Guide” страницей, я экспортировал код, чтобы сгенерировать глобальные и повторно используемые стили в своем CSS.

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

При экспорте кода из Webflow, вы получаете .zip-файл, содержащий:

  1. index.html;
  2. style-gu >Первые четыре файла, вероятно, покажутся вам знакомыми, чего не скажешь о пятом.

webflow.css содержит все стили для предварительно созданных Webflow-компонентов, таких как “навигационные панели”, “формы” и “кнопки”, и если вы не использовали данные компоненты в своем проекте, тогда вам и не потребуется ни один из стилей в этом файле.

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

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

5 советов для написания хорошего кода в Webflow

Неважно, кто вы — разработчик, желающий воспользоваться данным инструментом или дизайнер, желающий сам написать фронтенд-код и отправить его разработчику. Главное, чтобы ваш код был максимально чистым и эффективным. Исходя из этого, вот 5 советов для написания хорошего кода в Webflow:

1. Всегда используйте Style Gu >Как я уже говорил выше, использование “Style Guide” сохранит принцип “DRY” в CSS.

2. Пишите имена классов через дефис

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

3. Сделайте свой HTML более семантическим

В Webflow предусмотрены отдельные элементы «Section» и «Div», но при экспорте кода разделы экспортируются не как теги , а как теги

4. Используйте только тот код, который вам нужен

Когда вы удаляете элемент в Webflow, все связанные с ним стили никуда не исчезают, а по-прежнему присутствуют в экспортированном коде. Другими словами, вы не можете “переписать” код в Webflow. Кроме того, вам может никогда не понадобиться файл webflow.css, если вы не использовали предварительно созданные Webflow-элементы, вроде навигационных панелей, форм и кнопок. С учетом вышесказанного, вам необязательно использовать всю таблицу стилей — вы можете выбрать лишь отдельные компоненты.

В любом случае всегда стоит проверять экспортированную таблицу стилей и удалять ненужный код.

5. Добавьте комментарии

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

Лучший способ написать CSS

Привет, я создаю веб-сайт, я немного смущен тем, как писать CSS. Я хочу, чтобы я использовал разные классы для одного и того же стиля, должен ли я создавать класс, специфичный по стилю, и использовать их где угодно. позвольте мне использовать пример.

Предположим, я хочу дать минимальную высоту, должен ли я использовать это:

и используйте HTML следующим образом:

или я должен сделать это следующим образом: CSS:

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

Я бы тоже. Я бы не стал первым, потому что это классы, если элементы имеют одинаковые стили.

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

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

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

Технически это не имеет значения, так как оба будут работать одинаково.

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

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

Помните: идентификатор должен быть уникальным и применяться только к одному элементу на странице. Классы используются, когда вы нацелены на использование нескольких элементов.

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

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

Одна вещь, которую я всегда помню при написании кода: «Если я передам это другому разработчику, смогут ли они понять, что происходит с первого взгляда?»

В случае с другим разработчиком, добавляющим или изменяющим ваш код , им намного проще редактировать свой CSS, чем редактировать HTML, что особенно верно, если они используют CMS или что-то, что распространяется на разные файлы шаблонов. По этой причине, если вы начнете добавлять red и leftitems в HTML, разработчик должен будет перезаписать текущие правила, если они решат, что они не хотят, чтобы определенный элемент был красным или выравнивался слева, что может быстро получить запутанна.

Для всех продвинутых пользователей, читающих это, я бы рекомендовал использовать SCSS, а не CSS, поскольку он может сделать некоторые из них намного проще, поскольку он позволяет вложенность и переменные внутри вашего CSS — http://sass-lang.com/

Надеюсь, что это поможет!

Я бы назвал классы для того, что они представляют, а не для того, как они выглядят. Поэтому класс red — плохая идея. Когда вы решите, что весь красный текст должен быть синим, вы можете в итоге использовать css следующим образом:

Это не имеет смысла и на самом деле делает стиль намного сложнее.

Прежде всего, не помещайте свои классы CSS, используя имена, предлагающие визуальное намерение, например «minheightstyle». Часть идеи CSS состоит в том, чтобы разделить контент и стиль, доказанное преимущество, которое вы пытаетесь сделать недействительным с именами классов, которые вы показываете. Итак, это ваше первое эмпирическое правило — если вы хотите пометить элемент, вы не помечаете его просто для стилизации, вы помещаете его в подсказку о том, как этот элемент отличается от других по отношению к его контенту. Например, с тремя вашими div s, если все одинаковы, тогда их можно выбрать в качестве дочерних элементов их родителя, например:

Если один из них является выбранным пунктом меню (например), вы можете присвоить ему класс «selected» и соответствующим образом подстроить его:

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

И во-вторых, вы должны помнить, что правила, которые вы пишете, применяются браузером рабски — то есть элементы, которые в конечном итоге превышают вас с вашими таблицами стилей, должны в соответствии с требованиями CSS использовать свой стиль, пересчитанный из того, что было, То есть, если вы (например) решили переопределить стиль всех элементов со следующим селектором:

.. потому что вы решаете, что устали от небольших несоответствий между браузерами, применяя свои небольшие поля и прокладки здесь и там, и вы хотите, чтобы стальные элементы управления полями и прокладками на ваших страницах, тогда вы должны знать, что браузер будет связывать правило выше (либо вычислять стиль прямо тогда, и там, либо откладывать его на потом) каждому элементу, который у вас есть. Зная это, вы должны понять, лучше ли применять правило выше к некоторым элементам. Те же рассуждения обычно применяются для фоновых изображений — лучше ли применять фоновый цвет к дочерним элементам элемента или просто самому элементу (результат часто неотличим визуально)?

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

Конечно, есть другие способы выбрать вещи в приведенном выше, но просто попробуйте применить знания о том, как работает CSS. Абстракция от деталей — это хорошо, но для оптимизации требуется знание указанных деталей. Старайтесь не рассуждать о стиле при разработке вашей разметки — наберите его так, как если бы автор (ваш) стиль всегда был отключен или набирал его элементы тегов с учетом содержания. Затем примените CSS, просмотрите (часто нужны «обертки», но в настоящее время это жизнь веб-разработчиков), и повторите. Но постарайтесь сохранить содержание и стиль отдельно — изменение должно иметь минимальное влияние на другое.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих