Css как: 🤷🏽‍♀️ Page not found | MDN Web Docs

CSS: как обращаться к определенным тегам

Я только начинаю изучать CSS (и XHTML) и столкнулся с проблемой присвоения различных свойств тегам, которые имеют одно и то же имя тега.

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

Я считаю, что это как-то связано с тем, что заголовки называются по-разному (например, h4.a), но попытка сделать это не сработала. Помощь будет оценена по достоинству!

html

css

xhtml

Поделиться

Источник

kubasub    

15 декабря 2011 в 16:13

9 ответов

• Rally: запрос отфильтрован по определенным тегам

  Я пишу пользовательское приложение для Rally и хотел бы отфильтровать данные по историям с определенными тегами. До сих пор я не нашел способа написать правильный синтаксис для достижения этой цели. Вот пример стандартного запроса, который я бы включил в cardboardConfig: var query = new…

• regex для соответствия определенным тегам html

  Мне нужно сопоставить html тегов (весь тег), основываясь на имени тега. Для тегов скриптов у меня есть вот это: <script.+src=.+(\.js|\.axd).+(</script>|>) Он правильно соответствует обоим тегам в следующем html: <script src=Scripts/JScript1.js type=text/javascript /> <script…

7

Вы можете назначить класс каждому элементу и использовать CSS только для этого класса. Например:

HTML:

<h4>Green heading for this one</h4>
<h4>Red heading for this.</h4>

CSS:

h4.green { color:green; }
h4.red { color:red; }

Поделиться

Drew    

15 декабря 2011 в 16:15

7

Кроме того, имя тега CSS может быть применено классом и ID. Обратите внимание, что лучше всего убедиться, что регистр в ваших тегах совпадает с регистром в тегах.

.myClass может не относиться к классу=»myclass»

IDs:

<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>

<h4></h4>
<h4></h4>

Занятия:
.redHeading {цвет: красный;}
.blueHeader {цвет: синий;}

<h4></h4>
<h4></h4>

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

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

<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>

<h4></h4>
<h4></h4>

Поделиться

Chris    

15 декабря 2011 в 16:18

3

Добавьте различные атрибуты class к каждому h4 , а затем адресуйте их в CSS с помощью .className .

например:

HTML:

<h4>One header</h4>
<h4>Another header</h4>

CSS:

.class1 {
    color: #00f;
}
.class2 {
    color: #f00;
}

Поделиться

Aaron    

15 декабря 2011 в 16:14

3

Вот где пригодятся занятия.

CSS

.myFirstClass { color:green; }
.mySecondClass { color:red; }

HTML

<h4>Text</h4>
<h4>Text</h4>

Поделиться

Seth    

15 декабря 2011 в 16:15

3

Существует так много различных способов нацеливания на селекторы.

Вы можете дать им имена классов:

<h4>This should be blue</h4>
<h4>This should be green</h4>

// in you css
h4.makeblue { color: blue; }
h4.makegreen { color: green; }

Вы можете использовать «расширенные селекторы»:

<div>
    <h4>This should be blue</h4>
    <p>
        <h4>This should be green</h4>
    </p>
</div>

// in your css
div.container > h4 { color: blue; }
div.container p h4 { color: green; }

посмотрите здесь: http://css.maxdesign.com.au/selectutorial/

Поделиться

swatkins    

15 декабря 2011 в 16:17

• Примените эффект CSS только к первым 10 тегам <a> div

  Как применить эффект CSS к первым 10 тегам <a> div? Это мой подход, но я считаю, что должно быть лучшее решение: a:nth-child(1), a:nth-child(2), a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7), a:nth-child(8), a:nth-child(9), a:nth-child(10){ color:#4faacb; }

• Как получить доступ к переменным тегам в golang?

  Мне любопытно, как получить доступ к переменным тегам в golang. Я знаю, что JSON использует их вот так: type Foo struct { Bar string `json:-` } Но я, похоже, не могу найти способ получить доступ к этим тегам в коде для собственного использования. Как я могу получить эти значения, чтобы…

2

В CSS, обращаясь к тегу, вы обращаетесь ко всем копиям этого тега, если вы не более конкретны.

напр.

a h4 {} адресует все теги h4 в теге a .

Однако, если вы хотите стилизовать отдельные элементы или хотите больше свободы, вы должны использовать class или id .

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

<h4></h4> 

затем вы можете использовать

#header {
 // your css style here 
}

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

Или вы можете использовать класс, который можно использовать для нескольких элементов, например:

<h4></h4>
<a></a> 

затем вы можете использовать

.red {
  // your css style here
}

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

Google предоставляет здесь несколько хороших видеоуроков: HTML, CSS и Javascript с нуля

Поделиться

George Reith    

15 декабря 2011 в 16:18

2

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

Гораздо лучшей практикой является создание классов с семантическим значением, таких как: subtitle , navigationHeader и т. Д. Кроме того, это хорошая практика, чтобы дать несколько классов и, следовательно, «extend» объектов вместо того, чтобы повторяться:

<h3>Forum</h3>
<h3>Groups</h3>

.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: green;
}

.subtitle.forum {
  color: blue;
}

.subtitle.group {
  color: red;
}

Поделиться

PatrikAkerstrand    

15 декабря 2011 в 16:23

1

Сделайте класс в CSS, как это:

h4.class1
{
color: blue;
}

Тогда просто скажи:

<h4></h4>

Поделиться

piebie    

15 декабря 2011 в 16:15

0

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

h4.colorOne {
    color: #ff0000;
}

h4.colorTwo {
    color: #0000ff;
}

Тогда они будут использоваться как:

<h4>I'm red</h4>
<h4>I'm blue</h4>

Кроме того, вы можете указать параметры родителем, используя поле идентификатора в своего рода div:

#divOne h4 {
    color: #ff0000;
}

#divTwo h4 {
    color: #0000ff;
}

Который будет использоваться как:

<div><h4>I'm red</h4></div>
<div><h4>I'm blue</h4></div>

Все использование зависит от потребностей вашего макета и расширяемости ваших стилей.

Поделиться

Joel Etherton    

15 декабря 2011 в 16:17

Похожие вопросы:

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

Я работаю над плагином для страницы wordpress, и в теме, в которую он входит, есть style.css для этой темы. В этом style.css есть CSS атрибутов, которые применяются ко всем тегам img и p, и это…

примените изменение цвета только к некоторым тегам

Если я использую тег <h4> и применяю css h4 { color:White; } изменяет цвет всего текста заголовка 3 на белый. Я только хочу применить это к определенным тегам <h4> , хотя среди моих…

php-применить форматирование к определенным тегам HTML

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

Rally: запрос отфильтрован по определенным тегам

Я пишу пользовательское приложение для Rally и хотел бы отфильтровать данные по историям с определенными тегами. До сих пор я не нашел способа написать правильный синтаксис для достижения этой цели….

regex для соответствия определенным тегам html

Мне нужно сопоставить html тегов (весь тег), основываясь на имени тега. Для тегов скриптов у меня есть вот это: <script.+src=.+(\.js|\.axd).+(</script>|>) Он правильно соответствует…

Примените эффект CSS только к первым 10 тегам <a> div

Как применить эффект CSS к первым 10 тегам <a> div? Это мой подход, но я считаю, что должно быть лучшее решение: a:nth-child(1), a:nth-child(2), a:nth-child(3), a:nth-child(4), a:nth-child(5),…

Как получить доступ к переменным тегам в golang?

Мне любопытно, как получить доступ к переменным тегам в golang. Я знаю, что JSON использует их вот так: type Foo struct { Bar string `json:-` } Но я, похоже, не могу найти способ получить доступ к…

Как реализовать поля и обращаться к ним как к шахматам

Я пытаюсь реализовать игру под названием Pah Tum. (Это не имеет отношения к тому, как это работает для моей проблемы.) Я хочу создать поле в консоли вот так: A B C D 1 [] [] [] [] 2 [] [] [] [] 3 []…

Невозможно получить доступ к узлам/тегам в ответе JSON в ответе Python

Пытаюсь наконец выучить Python. Прочитав все остальные вопросы на эту тему, я пришел к выводу, что я идиот. Я делаю запрос Python на открытый API, как показано ниже import requests import json url =…

Можно ли применить CSS только к тегам с параметром onClick?

У меня есть несколько различных типов тегов, которые имеют параметр onClick . Есть ли какой-нибудь способ применить CSS только к тегам, имеющим этот параметр onClick ?

CSS — Как выставляется приоритеты у стилей?

Многие начинающие верстальщики упускают одну очень важную вещь — приоритет стилей. После прочтения этой статьи у вас не останется вопросов 🙂 .

Какой стиль выбирается первым если их несколько в CSS?

Cascading Style Sheets, ни что иное, как каскадная таблица стилей. Одна из частей этого механизма, это возможность задавать несколько стилей для одного HTML элемента.

Почему я написал правило, а оно не применилось в CSS? Ответ всё тот-же — приоритет. Разберемся при помощи простой таблицы, какие стили получит элемент и почему:

Давайте рассмотрим на примере, чтобы было более понятней:

div

и напишем такие стили:

.wrap {
  font-size: 14px;
}
#main {
  font-size: 16px;
}
div {
  font-size: 13px;
}

Как вы думаете какой стиль будет применен? Правильный ответ — #main. Давайте теперь напишем другие стили:

div.wrap {
  font-size: 15px;
}
.wrap {
  font-size: 20px;
}

Правильный ответ — div.wrap. Почему так? Тег по «весу» у нас 1, класс 10, итого 11. 11 > 10, а значит у этого правила выше приоритет.

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

Поэтому, если ваше правило состоит из очень многих «родительских и дочерних элементов», то вовсе не удивительно, что указав один лишь класс вы не сможете перекрыть стили.

К примеру, пред. разработчик написал такой стиль

#contact ul.header-nav li.header-list a.header-link {}

суммарно это 133, а такое число попробуй еще перебить 🙂 .

Можно ли использовать !important ?

!important пишется в тяжелых случаях, и в целом его использовать не рекомендуется. Применять его стоит лишь тогда, когда вы не можете перекрыть чужие стили, или такой вот «привет из прошлого» как style=»font-size: 15px;».

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

#nav li {
  font-size: 13px !important;
}

Рекомендации по написанию CSS

Есть несколько популярных методологий: БЭМ от Яндекса, Атомарный CSS, SMACSS и т.д. Подробнее почитайте в интернете про каждую, у них есть как плюсы так и минусы. Не так важно что вы будете использовать в работе, самое главное придерживаться какому-то одному направлению, а не всего почучуть.

От себя бы порекомендовал бы следующее:

1. Не привязывайте стили к родительским блокам, если их потом можно применять в другом месте на сайте. И уж тем более не привязывайте стили к ID без крайней на то необходимости. Категорически плохо писать для каждой отдельной страницы
#contact-page li а затем #about-page li и т.д.

2. Не создавайте простыню из стилей в правиле «родитель -> потомок -> кум -> сват -> брат», это никому не нужно. Если вы считаете что указание 1 класса мало, напишите еще 1-2, но не больше.

3. Используйте ТОЛЬКО классы. В некоторых случаях допустимо указывать вложенные теги (например .table-good td). Не используйте стили для ID, или глобальные стили без необходимости.

4. Если вы используете JavaScript или jQuery, и пишите события для этих классов, которые не будут стилизованы (например, active или visible), то пишите классы как js-submit (с приставкой js-), а стили задавайте отдельно. Будет куда понятней, что ссылка a class=»js-submit btn btn-default» содержит стили и js событие.

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

Каскадность в CSS: как высчитываются приоритеты стилей

CSS — это каскадные таблицы стилей (Cascading Style Sheets). Каскадность — это главный принцип css — это приоритет одних правил/стилей над другими. Это когда одни стили перебивают другие.

Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.

Компания Boosta.

Смотрите также:

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

Таблица веса (числа) для каждого селектора:

Из правил с одинаковым весом выбираются те, которые ближе к концу HTML страницы (ниже в коде).

Пример подсчета веса (вес представляет из себя число):

#content .text p { color:red; } /* 100 + 10 + 1 = 111 */
.text p { color:blue; }         /* 10 + 1 = 11 */

Тег <p> внутри элемента .text получит стиль color:red;, а не color:blue;, потому что число 111 больше чем 11.

Теперь давайте посчитаем веса на примере:

* {}                        /* =   0 */
li {}                       /* =   1 */
li::first-line {}           /* =   2 */
ul li {}                    /* =   2 */
ul ol + li {}               /* =   3 */
ul li.red {}                /* =  12 */
li.red.level {}             /* =  21 */
li:not(.red){}              /* =  11 */
li:not(.red):not(.green){}  /* =  11 */

#t34 {}                     /* = 100 */

#content #wrap {}           /* = 200 */

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

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

.class.class { color:blue; } /* сильнее чем .class */
.class { color:red; }

img[src] {  } /* вес = 11 */

Приоритет @media

Медиа правила @media ( max-width:500px ){ } не участвуют в подсчете приоритета (веса).

Поэтому они всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие правила с таким же весом (приоритетом).

Правильно:

.section { width:100%; }

@media ( max-width:500px ) {
	.section { width:50%; }
}

Неправильно:

@media ( max-width: 500px ) {
	.section { width:50%; }
}

.section { width:100%; }

Как я изучил CSS. Как я изучал HTML. 2002 год. Фото

Многие ржали надо мной, что я занимаясь ерундой, читая книгу. Но я рад, что я осилил её целиком. Что это мне дало?

• я теперь полностью понимаю как строится вэб-страница
• узнал полезные штуки, встроенные в Google Chrome
• я могу сам сверстать любой дизайн
• я стал лучше понимать своего программиста и даже меньше обижаться когда он мне говорит что я г**но
• теперь я могу сэкономить время программиста, за счет более четкой постановки ТЗ
• лучше стал понимать некоторые вещи по смартлабу.

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

Свой первый сайт я сделал в 2002-м на бесплатном хостинге by.ru (сейчас даже url этот не открывается). В 20 лет я пошел работать риэлтером. Взял фотик и отснял все объекты которые были в агентстве и выложил в интернет. Тогда у агентства даже сайта не было — понятное дело, интернета совсем было мало, компьютер то далеко не у всех дома был. Вот та веб-страница:
https://web.archive.org/web/20031106014639/http://jcs.by.ru/

Я сейчас очень удивился, найдя её в веб-архиве. Прошло 15 лет, и прикол в том, что нет сайта by.ru но и агентства то этого уже больше нет в помине:)  Кстати, зацените цены, которые тогда были на питерскую недвигу! 

Как я впервые изучил HTML?

У нас на 1-м курсе универа надо было вэб-страницу сделать, я тогда начал читать книгу HTML. Тогда не было таблиц стилей, вся верстка строилась на таблицах по сути. Я купил громоздкую книгу HTML и начал читать. Прочитал страниц 150, почувствовал что теперь знаю всё и больше не читал. Сейчас мне кажется, что это была системная ошибка. Надо обязательно читать всё целиком, так как какие-то важные вещи ты упускаешь из виду. Но тогда нагрузка в универе была такая большая и разнообразная, что времени читать книги целиком просто не было.

Так вот моё представление о сайтостроении и веб-дизайне оставалось на уровне того самого хтмля и дальне не продвинулось.

кстати помните выступление Джобса в Стэнфорде? Где он говорит что точки можно соединить только, смотря назад. Так вот первую версию смартлаба я сделал тупо используя те же знания, что у меня были, когда я делал jsc.by.ru. И потом смартлаб уже рос как снежный ком сам, вопреки моему первоначальному замыслу. 

Как я читал CSS теперь?

Полностью, все 720 страниц. И делал все примеры из книги и еще попутно эксперементировал на дизайном смартлаба. Чтение растянулось на месяц, но что делать. Кстати книга эта намного проще, чем книга про программирование на C#. Ту книгу я тоже почти дочитал и сделал все примеры. И та книга была самой сложной книгой в истории, которую я когда либо читал. Никогда мне еще так не приходилось напрягать мозг во время чтения.

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

2002 год:

Агентство в котором я работал. Просто зашел с улицы и сказал — хочу у вас работать! Было очень страшно, но мотивации у меня было тогда намного больше.

От Савушкина до Богатырского зелёная пустошь! Сейчас она вхлам застроена. Отсюда даже виден дом в котором жила моя будущая девушка, с которой я познакомлюсь только через три года.

Вид с Савушкина на стадион Кирова. Эти гаражи снесут нахрен и весь вид из этого дома закроет еще более высокий дом. Здесь же построят ЗСД, Ротенберги намоют сушу около Крестовского и построят какие-то здания академии Дзюдо. А Васильевский остров намоют на километр вправо. Так что можно сказать уникальное фото)) Надо его на сайт oldmos отправить (или как он там называется)

А это фото в обратную сторону от гостиницы прибалтийская как раз на дом, из которого я фотографировал предыдущее фото. Тоже уникальное. Потому что ландшафт изменился невероятно. Залива слева больше нет, там целый район и порт. Окружная дорога. А еще слева там намыли целый парк 300-летия и построили аквапарк с круглой крышей. Невероятно, как всё изменилось.

Моя родная улица Правды и мой родной дом (справа). В следующем году (под 300-летие Санкт-Петербурга) она изменится до неузнаваемости. Сейчас обращает внимание насколько мало машин припарковано! Тогда мы даже не понимали, как это круто, когда мало машин!!!! 

А это я. Я тогда был в большом стрессе. Сильно влюбился и страдал. Но это дало мне мотивацию, без которой я бы наверное сделал меньше.

Изучение CSS: как работает CSS

1. Что такое CSS

CSS — это язык, используемый для определения того, как документы представляются пользователям — как они стилизованы, расположены и т. Д.

ДокументацияОбычно текстовый файл, структурированный на языке разметки -HTML Это наиболее часто используемый язык разметки, но есть и другие языки разметки, напримерSVG ИлиXML。

настоящее времяДокументирование для пользователя означает преобразование его в форму, пригодную для использования пользователем.БраузерТакие какFirefox, Chrome ИлиInternet Explorer, Предназначен для визуализации документов.

2. Как CSS влияет на HTML

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

• Одна группаАтрибуты , Значение атрибута обновляет способ отображения содержимого HTML. Например, я хочу, чтобы ширина элемента составляла 50% от его родительского элемента или чтобы фон элемента был красным.
• Один Селектор, Он выбирает элемент, эти элементы являются элементами, к которым вы хотите применить последнее значение атрибута. Например, я хочу применить свои правила CSS ко всем абзацам в моем HTML-документе.

Таблица стилейНабор правил CSS определяет, как будет отображаться веб-страница.

Пример CSS

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>Hello World!</h2>
    <p>This is my first CSS example</p>
  </body>
</html>

Соответствующий CSS

h2 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Первое правило начинается сh2 Селектор запускается, что означает, что он применяет значение своего атрибута к“ В элементе он содержит три атрибута и их соответствующие значения (каждая пара атрибут / значение называется объявлением):

1. Первый оператор устанавливает синий цвет текста;
2. Второй оператор устанавливает желтый цвет фона;
3. Третий оператор устанавливает границу заголовка (h2 — элемент заголовка) следующим образом: сплошная линия шириной 1 пиксель (не пунктирная, пунктирная и т. Д.), Черный цвет.

Второе правило начинается с селектора p, что означает, что оно применяет значение своего атрибута к“ Элемент. Он содержит инструкцию, устанавливающую красный цвет шрифта.

В веб-браузере приведенный выше код выдаст следующий результат:

3. Как на самом деле работает CSS

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

1. Браузер будетHTML с CSS Конвертировано в DOM （Объектная модель документа). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.

2. Браузер отображает содержимое DOM.

DOM

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

Поскольку DOM — это то место, где CSS встречается с содержимым документа, понимание DOM помогает проектировать, отлаживать и поддерживать файлы CSS.

Представление DOM

Сначала посмотрите на фрагмент HTML-кода:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

В этом DOM<p> Узел, соответствующий элементу, является родительским узлом. Его дочерний узел — это текстовый узел, и некоторые из наших<span> Узел, соответствующий элементу. Вот эти SPANУзлы также являются родительскими узлами, а соответствующие им текстовые узлы — их дочерними узлами:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Вот как браузер интерпретирует предыдущий фрагмент HTML — он отображает указанное выше дерево DOM, а затем выводит его в браузере.

Применить CSS к DOM

Если вы примените следующий CSS к указанному выше HTML:

span {
  border: 1px solid black;
  background-color: lime;
}

Браузер проанализирует HTML и создаст из него DOM, а затем проанализирует CSS. Поскольку в CSS доступно только одно правило, у правила есть селектор диапазона, который применяет это правило к этим трем.<span>Каждый из них. Обновленный вывод выглядит следующим образом:

## 4. Применить CSS к HTML

4.1 Внешняя таблица стилей

Сохраните CSS в отдельном файле с расширением .css и загрузите его из HTML.“Цитируйте это, то есть CSS и HTML — это два файла.

4.2 Внутренняя таблица стилей

Поместите свой CSS в

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h2 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
    <p>This is my first CSS example</p>
  </body>
</html>

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

4.3 Встроенный стиль

Встроенные стили — это объявления CSS, которые влияют только на один элемент и являютсяstyle Атрибуты включают:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h2>Hello World!</h2>
    <p>This is my first CSS example</p>
  </body>
</html>

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

7 важных советов, как писать лучший CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи
«7 Important Tips for Writing Better CSS».

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

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

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

1. DRY

Название принципа DRY это аббревиатура
слов «Don’t Repeat Yourself» («не повторяйся»).
Это общий принцип разработки ПО,
применимый к любым языкам программирования,
а также и к CSS. Как следует из названия,
принцип DRY призывает нас по возможности
уменьшать количество повторов в коде.

Например, мы можем написать три разных
CSS-класса для трех кнопок:

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Или можно применить принцип DRY и
единожды написать общие правила в
дополнительном классе, а в классах
конкретных кнопок останутся только
специфические для этих кнопок правила:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

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

2. Нейминг

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

// Плохой нейминг

.p {
  // Rules
}

.myFirstForm {
  // Rules
}

Обычно <p> это HTML-тег, обозначающий
абзац. В приведенном выше коде мы не
можем сходу понять, что представляет
из себя класс p. Также следует избегать
имен вроде myFirstForm, поскольку использование
camel case не поощряется.

Вместо этого используйте описательные
имена (если они состоят из нескольких
слов, разделяйте эти слова дефисами):

// Хороший нейминг

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
}

Теперь эти имена гораздо понятнее!

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

3. Не используйте встроенные
стили

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

Разделение ответственности

Согласно принципу разделения
ответственности, дизайн (CSS), контент
(HTML) и логика (JavaScript) должны быть разделены.
Делается это, в частности, для улучшения
читаемости и поддерживаемости кода.

Включение CSS-правил в HTML-теги нарушает это правило:

<div>Some Text</div>

Правила стиля должны храниться во
внешних CSS-файлах.

Сложности поиска

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

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

<div>Some Text</div>

Затем нам нужно найти селектор, здесь
— класс text-bold. Наконец, мы отправляемся
к этому классу и вносим изменения:

.text-bold {
  font-size: 16px;    // change the font-size to 14px
  font-weight: bold;
}

Но что если правила прописаны внутри
тега, без использования классов?

<div>Some Text</div>

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

Не проще ли использовать селектор
CSS? А есть ведь вещи и похуже…

Специфичность (проблемы с перезаписыванием)

Встроенные стили обладают самой
высокой специфичностью (если не считать
тегов !important).

Допустим, мы используем для элемента
и класс, и встроенный стиль:

.text-bold {
  font-size: 16px;
  font-weight: bold;
}

<div>Some Text</div>

Таким образом, font-size текста будет 14px,
потому что встроенные стили имеют более
высокую специфичность, чем CSS-классы.
Вы вносите изменение в класс:

.text-bold {
  font-size: 20px;
  font-weight: bold;
}

А размер шрифта все равно остается равным 14px. Изменение CSS-класса ни к чему не приводит, и вы восклицаете: «Эй, а почему это мой CSS-код не работает? Ненавижу CSS!». Это приводит вас к использованию !important, который творит чудеса:

.text-bold {
  font-size: 20px !important;
  font-weight: bold;
}

А это табу, и о нем мы поговорим в
следующем разделе.

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

Окей, ваш CSS не сработал, хотя должен был, и вы заставили его работать, применив !important.

Что происходит дальше? !important имеет самую высокую специфичность среди всех CSS-селекторов.

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

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

5. Используйте препроцессор

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

Например, мы можем определять переменные,
функции и миксины, можем испортировать
и экспортировать наши CSS-файлы в другие
CSS-файлы, а также писать вложенный
CSS-код:

Пример кода Sass

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

Мне нравится работать с Sass, я его
применял во многих проектах. О преимуществах
использования препроцессоров я писал
отдельно.

6. Используйте сокращенные
варианты записи

Некоторые CSS-свойства, такие как
padding, margin, font и border можно описывать гораздо
проще, применяя сокращенный вариант
записи. Также это помогает уменьшить
количество строк в правилах.

При полном варианте записи CSS-класс
выглядит так:

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid:
  border-color: black;
}

а при сокращенном — так:

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

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

7. При необходимости добавляйте
комментарии

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

// Ваши комментарии
.example-class {
  // your rules
}

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

Переключение стилей в CSS: как реализовать и зачем это нужно

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

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

Переключение стилей CSS 

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

• по времени, когда стили чередуются между собой спустя какой-то временной промежуток;

• реакция на действия пользователя, когда стиль меняется в зависимости от того, что делает пользователь на странице;

• при помощи кнопки, когда переключение между стилями происходит принудительно, если нажать кнопку или перевести «ползунок» в другое положение;

• и др.

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

• при помощи возможностей самой таблицы стилей;

• с использованием библиотек jQuery и/или jQuery UI;

• при помощи языка программирования, например: JavaScript, PHP, Python, Java и др.

Самая несложная реализация переключения стилей осуществляется при помощи возможностей CSS и/или JavaScript. Неважно, каким способом происходит само переключение — во всех случаях нужно, чтобы было продумано несколько разных таблиц стилей, между которыми будет налажено переключение.

Переключение стилей при помощи чистого CSS

Переключение стилей при помощи чистого CSS осуществляется через псевдокласс «:checked». Такой способ подходит, если нужно организовать переключение при помощи воздействия пользователя на элемент. Псевдокласс «:checked» обозначает состояние элемента, к которому он привязан. Обычно его привязывают к чекбоксу или радиокнопке. Таким образом, пользователь сам может изменять состояние элемента, если отметит чекбокс или выберет определенную радиокнопку.

Как реализовать переключение стилей CSS кодом

Мы покажем, по какому принципу реализуется смена стилей при помощи псевдокласса «:checked». Допустим, у вас на сайте есть чекбокс из 4-х компонентов. При выборе одного из компонентов должна происходить смена стилей. К примеру, в стилях у нас будет указана смена фона какого-то HTML-блока.

Код HTML будет примерно таким:

 <!—включаем фон посветлее (#eaeaea) —>

<input type=»radio» name=»MyLayout» checked>

<label for=»lighter-layout»>

Lighter Background</label>

<!—включаем фон потемнее (#494949) —>

<input type=»radio» name=»MyLayout»>

<label for=»darker-layout»>

Darker Background

</label>

<!—Подключаем изображение вместо цвета фона —>

<input type=»radio» name=»MyLayout»>

<label for=»picture-layout»>

Picture Background</label>

<!— Подключаем паттерн-шаблон изображения вместо цвета —>    

<input type=»radio» name=»MyLayout»>

<label for=»template-layout»>

Template Background</label>

Для радиокнопок мы не укажем собственный стиль — это вы сделаете сами. В собственном стиле отразится, как они должны выглядеть и где должны располагаться. Мы покажем, как будет выглядеть псевдокласс «:checked».

Код CSS будет таким:

.lighter-layout:checked {

  background: #eaeaea;

}

.darker-layout:checked {

  background: #494949;

}

.picture-layout:checked {

  background: url(image url) no-repeat center 0 fixed;

}

.template-layout:checked{

  background: url(images/template.png) repeat;

}

Заключение

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

и $) в CSS для классов

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

[attribute * = ”str”] Селектор: Селектор [attribute * = ”str”] используется для выбора тех элементов, значение атрибута которых содержит указанную подстроку str . В этом примере показано, как использовать подстановочный знак для выбора всех div с классом, содержащим str .Это может быть начало, конец или середина урока.
Синтаксис:

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | Курс HTML .

 [атрибут * = "значение"] {
    // свойство CSS
} 

Пример:

Выход:

[attribute $ = ”str”] Селектор: [attribute $ = ” value ”] используется для выбора тех элементов, значение атрибута которых заканчивается заданным значением str .В следующем примере выбираются все элементы со значением атрибута class, которое заканчивается на str .

Синтаксис:

 [attribute $ = "str"] {
    // свойство CSS
} 

Пример:

Выход:

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

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

10 кнопок «Нравится» и «Любимые» в CSS

С момента изобретения Facebook кнопки «Нравится» все больше и больше веб-разработчиков используют ее для увеличения просмотров статей, делясь ими в социальных сетях. Привлекательность кнопок «Нравится» может стать основной причиной того, что нам понравился наш сайт.Эффектный дизайн важен в любой сфере. В его коллекции мы демонстрируем бесплатные CSS и HTML-кнопки «Нравится» / «Любимые» , которые вы можете легко адаптировать к своим потребностям и потребностям вашего веб-сайта. Приложив немного усилий, вы также можете интегрировать тему с системой facebook.

Кнопка, созданная Twitter с анимацией HTML5 / SVG и CSS3

Twitter Like создан только с использованием анимации SVG и CSS3.

Сделано Робин 24 декабря 2016 г.

демонстрация и код

Кнопка "Нравится" при наведении курсора

Сделано Сэмом Лилликрэпом 28 января 2014 г.

демонстрация и код

Интерактивная кнопка "Нравится"

Сделано Gowri Prasanth V M 12 октября 2016 г.

демонстрация и код

Анимированная кнопка «Мне нравится»

Сделано Кираном Хантером 18 декабря 2014 г.

демонстрация и код

Кнопка "Мне нравится" в Twitter

Сделано mxra8, 6 мая 2016 г.

демонстрация и код

Кнопка Like с анимированным фоном в AngularJS

Сделано Мартином Якубиком 7 МАЯ 2015 ГОДА

демонстрация и код

Кнопка избранного на чистом CSS

Сделано Джейми Колтер 18 МАРТА 2015

демонстрация и код

Переключатель кнопки Heart Like

Сделано Остином Дудасом 9 октября 2017 г.

демонстрация и код

Кнопка «Мне нравится» в Facebook

Сделано Мохаммедом Алозайби 26 августа 2016 г.

демонстрация и код

Кнопка Like с JS

Сделано Хорхе Рейесом 09 марта 2019 г.

демонстрация и код

Как писать селекторы CSS как BOSS

Я работаю инженером-программистом в Endtest.

В этой статье я покажу вам, как писать селекторы CSS как БОСС.

Что такое селектор CSS?

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

Их можно использовать в ваших файлах CSS, в коде JavaScript или в автоматизированных тестах.

Аналогия с рестораном

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

Если у вашего любимого ресторана уникальное название, это действительно просто.

Но если это не так, вам необходимо предоставить более подробную информацию.

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

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

Легкий путь

Вы можете получить селектор CSS для элемента непосредственно из инструментов разработчика Chrome:

Но этого CSS-селектора может быть недостаточно для ваших конкретных нужд.

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

1. Напишите селектор CSS, используя идентификатор.

Это самый простой пример селектора CSS.

Допустим, у вас есть элемент div с бобышкой ID :

  
 Я начальник. 
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Ваш селектор CSS будет выглядеть так:

  #boss
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

2. Напишите селектор CSS, используя имя класса.

Что, если бы у вашего элемента было имя класса босс ?

  
 Я начальник. 
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Ваш селектор CSS будет выглядеть так:

  .boss
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Стоит знать, что имена классов обычно используются несколькими элементами.

Распространенная ошибка - видеть несколько имен классов и думать, что это всего лишь одно имя класса с пробелами.

Имена классов не могут содержать пробелов.

Если вы видите пробел в значении атрибута класса, это просто означает, что у вас более одного имени класса.

  
 Я начальник. 
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Ваш селектор CSS может выглядеть так:

 .босс
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Или так:

  .чемпион
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Или так:

  .expert
  

Войти в полноэкранный режимВыйти из полноэкранного режима

3. Напишите селектор CSS с помощью атрибута Name.

Современные фреймворки, такие как React и Ember.js, обычно делают идентификаторы динамическими, что делает их ненадежными при использовании в селекторах CSS.

В таких случаях мы можем использовать атрибут Name.

  
 Я начальник. 
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Ваш селектор CSS будет выглядеть так:

  div [name = "boss"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

4. Напишите селектор CSS, используя любой атрибут.

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

  tag_name [attribute = "attribute_value"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Вы даже можете пропустить имя тега:

  [attribute = "attribute_value"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Или просто используйте звездочку вместо имени тега:

  * [attribute = "attribute_value"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Допустим, у нас есть входной файл с динамическим идентификатором:

Войти в полноэкранный режимВыйти из полноэкранного режима

Поскольку мы не можем использовать идентификатор, мы можем просто написать селектор CSS, который использует атрибут типа:

  ввод [type = "file"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

5.Напишите селектор CSS, используя несколько атрибутов.

Войти в полноэкранный режимВыйти из полноэкранного режима

Нам просто нужно выровнять атрибуты:

  имя_ тега [attribute1 = "attribute1_value"] [attribute2 = "attribute_2_value"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Итак, селектор CSS для первого ввода будет:

  input [type = "text"] [placeholder = "Full Name"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

6.= "босс"]

Войти в полноэкранный режимВыйти из полноэкранного режима

7. Напишите селектор CSS, используя родительские элементы элемента.

Давайте посмотрим на этот пример:

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

  тело> div> input [type = text]: nth-child (1)
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Очевидно, проще было бы записать его с помощью атрибута:

  ввод [placeholder = "Электронная почта"]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

8. Напишите селектор CSS, используя текст внутри элемента.

  
   
      

         
 Apple 
         
 Апельсин 
         
 Банан 
      
   

  

Войти в полноэкранный режимВыйти из полноэкранного режима

Попробуем написать селектор CSS для пункта оранжевого списка.

Ух, мы не можем.

CSS-селекторы

не имеют возможности находить элемент на основе текста, но XPath имеет.

XPath для элемента оранжевого списка будет:

  // li [содержит (text (), 'Orange')]
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Умная альтернатива

Если вы хотите проводить автоматические тесты, вам следует попробовать Endtest, нашу отмеченную наградами облачную платформу.

У нас даже есть тестовый регистратор, который можно настроить для работы с динамическими идентификаторами и атрибутами:

Вы можете найти все подробности в нашей документации.

Почему мне не нравится Tailwind CSS

Основываясь на отзывах, я обновил этот пост, чтобы прояснить некоторые моменты и предложить более сбалансированную точку зрения. Это не холм, на котором я умру; В конце концов, важно то, что вы продуктивно пишете CSS. Если это означает использование попутного ветра, никто вас не остановит. Ниже приведены лишь некоторые причины, по которым I не нравится им пользоваться.

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

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

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

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

Странно то, что я на самом деле прочитал всю статью Адама Уотана о семантическом CSS и обнаружил, что сначала согласен с его точкой зрения.Адам утверждает, что вся парадигма «семантического CSS» не работает на практике, и что разработчики склонны тяготеть к подходу Utility CSS в течение своей карьеры. Согласно этой парадигме, имена ваших классов должны быть как можно более детализированными и отвечать за одну главную задачу. Эти служебные классы служат основными строительными блоками («токенами») вашего пользовательского интерфейса, позволяя объединять их вместе для реализации сложных проектов. Например, если вы обнаружите, что повторяете display: flex или flex-wrap: wrap в своем CSS, вы можете абстрагировать их в служебные классы, такие как flex или flex-wrap , которые вы можете применить к любому элементу.

Я написал несколько тысяч слов о том, почему традиционные «семантические имена классов» являются причиной сложности поддержки CSS, но правда в том, что вы никогда не поверите мне, пока не попробуете это на самом деле. Если вы можете подавить желание рвать достаточно долго, чтобы дать ему шанс, я действительно думаю, вы удивитесь, как вы когда-либо работали с CSS каким-либо другим способом.

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

Содержание

1. Но сначала, почему существует Tailwind CSS?
2. Почему попутный ветер не стоит вашего времени
   1. 1. Попутный ветер затрудняет чтение кода
      1. Вам нужно изучить новый способ написания CSS
      2. Он непоследователен
      3. Это сложно читать
      4. Вы не можете цепляться Селекторы
      5. Это затрудняет просмотр PR
   2. 2. Попутный ветер и свойства имени класса плохо сочетаются
   3. 3. Попутный ветер блокирует вас в парадигме служебных программ
   4. 4.Попутный ветер раздувается
   5. 5. Попутный ветер - ненужная абстракция
   6. 6. Семантика важна. Попутный ветер отказывается от этого.
   7. 7. Попутный ветер, инструменты разработчика и опыт разработчика
      1. Сложнее настроить CSS в инструментах разработчика
      2. Сложнее найти компоненты в инструментах разработчика
      3. Перекомпиляция HTML медленнее, чем перекомпиляция CSS
   8. 8. Попутный ветер все еще Отсутствуют некоторые ключевые особенности CSS.
3. Прекрасно, но что вы должны использовать вместо этого?
4. Заключительные мысли
5. Атрибуции

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

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

Это один из аргументов, который Адам использует в своей статье. Он отмечает, что при семантическом подходе CSS существует неотъемлемая связь HTML с CSS, когда либо ваши классы HTML диктуют ваш CSS, либо наоборот. И, таким образом, весь принцип «разделения проблем» разваливается, потому что ваш HTML и CSS зависят друг от друга .

Я «разделил свои опасения», но все еще оставалась очень очевидная связь между моим CSS и моим HTML. Большую часть времени мой CSS был как зеркало для моей разметки; идеально отражает мою структуру HTML с вложенными селекторами CSS.

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

Может быть, мои опасения не так разделялись.

В принципе, в этом есть смысл. Но, как мы увидим, Tailwind на самом деле не решает эту проблему «разделения ответственности»."И это фактически создает несколько других проблем.

Итак, давайте рассмотрим некоторые причины, по которым мне не нравится Tailwind CSS.

1. Попутный ветер затрудняет чтение кода

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

Вам нужно научиться новому способу написания CSS

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

Непоследовательно

Звучит как довольно простая задача для любого, кому когда-либо приходилось осваивать новый язык или инструмент, но Tailwind несовместим с некоторыми из своих соглашений об именах. Например, с Flexbox классы justify- * Tailwind соответствуют justify-content в CSS. Естественно, можно было бы подумать, что классы align- * будут соответствовать align-items . Но на самом деле они соответствуют малоиспользуемому свойству align-content .Это сбивает с толку, потому что CSS также имеет свойства с именами justify-items и align-content . Это означает, что с первого взгляда вы фактически не можете сказать, чему соответствует какое-либо из этих сокращенных имен классов:

• items- * : выровнять или выровнять?
• content- * : выровнять или выровнять?
• justify- * : содержание или элементы?
• align- * : контент или элементы?

Это хорошо переходит в связанный пункт.

Сложно читать

Плохие соглашения об именах (или просто плохие имена переменных в целом) являются источником большой путаницы, когда другие люди читают ваш код. Я бы предпочел посмотреть на некоторый CSS, который имеет отступ : 0,25 rem или margin: 0,5 rem вместо того, чтобы пытаться мысленно сопоставить Tailwind p-1 или m-2 с их эквивалентами CSS. Ванильный CSS и препроцессоры CSS, такие как SCSS или LESS, не налагают большого умственного бремени, когда вы их читаете.Попутный ветер становится еще хуже с медиа-запросами, которые, как вы уже догадались, имеют форму префиксов имен классов:

Еще одна причина, по которой «Попутный ветер» так трудно читать, заключается в том, что он требует от вас панорамирования глаз по горизонтали, а не по вертикали . Вы знаете, как дизайнеры рекомендуют размещать текст по центру страницы, где-то около 60 символов, чтобы людям было легче читать? Это потому, что чем шире ваш текст, тем труднее читателю перейти к следующей строке и тем труднее найти именно то слово, которое вы ищете в стене горизонтального текста.И все же попутный ветер заставляет вас делать именно это. Когда вы соединяете кучу имен классов вместе, вы получаете разметку, которая выглядит следующим образом:

  

  Ой.

  

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

Это 71 имя класса просто для оформления флажка.

К сожалению, ESLint / Prettier даже не отформатирует ваши классы должным образом или не поместит их в новую строку - они просто вытолкнут опору className , но сама строка может продолжаться бесконечно.Это может заставить вас прокрутить ваш редактор по горизонтали, чтобы просмотреть полный список классов. Собственная документация Tailwind страдает именно этой проблемой - многие блоки кода переполняются по горизонтали и вынуждают вас выполнять прокрутку, чтобы найти соответствующий класс в море строк

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

Вот необработанный CSS-эквивалент примера кода Tailwind, который я показал ранее:

  .thing {
  ширина: 16 пикселей;
  высота: 16 пикселей;
  цвет белый;
  цвет фона: черный;
  отступ: 0.25 бэр 0,5 бэр;
  запас: 0,25 бэр;
  радиус границы: 0,25 бэр;
  размер шрифта: 0.875rem;
  высота строки: 1,25 бэр;
}

@media screen и (min-width: 768px) {
  .вещь {
    ширина: 32 пикселя;
    высота: 32 пикселя;
    пограничный радиус: 0,375 бэр;
    размер шрифта: 1 бэр;
    высота строки: 1,5 бэр;
  }
}

@media screen и (min-width: 1024px) {
  .вещь {
    ширина: 48 пикселей;
    высота: 48 пикселей;
    радиус границы: 0,5 бэр;
    размер шрифта: 1,125 бэр;
    высота строки: 1,75 бэр;
  }
}
  

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

Вы не можете переключить цепочку переключателей

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

  .nav-ссылка: фокус,
.nav-link: навести,
.nav-link [aria-current = "page"] {
  
}
  

Или еще лучше, это:

  .nav-link: is (: focus,: hover, [aria-current = "page"]) {
  
}
  

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

Из-за этого сложнее проверять PR

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

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

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

2. Попутный ветер и атрибуты названия класса плохо сочетаются

С большинством CSS-in-JS и ванильных решений CSS стилизация компонентов в такой среде, как React, довольно проста.Вы добавляете опору className к компоненту, определяете эти стили в потребительском компоненте и передаете имя класса настраиваемому компоненту:

  const Button = (props: ButtonProps) => {
  return (
    {props.children}
  );
}

const Parent = () => {
  return 
}
  

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

Например, предположим, что вы используете отличный пакет classnames для объединения нескольких имен классов вместе, некоторые из которых являются условными:

  импортировать имена классов из имен классов;

const Parent = () => {
  const isFullWidth = true;
  return 
}
  

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

  import classNames из "classnames";

const Parent = () => {
  const isActive = true;
  const isDisabled = false;
  возвращение (
    <Кнопка
      className = {classNames ("bg-blue-500", "text-white", {
        "bg-blue-300 text-black": isActive,
        "bg-gray-300 text-gray-600": isDisabled,
      })}
    />
  );
};
  

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

  import classNames из "classnames";

const Parent = () => {
  const isActive = true;
  const isDisabled = false;

  const activeClass = "bg-blue-300 черный текст";
  const disabledClass = "bg-серый-300 текст-серый-600";

  возвращение (
    <Кнопка
      className = {classNames ("bg-blue-500", "text-white", {
        [activeClass]: isActive,
        [disabledClass]: isDisabled,
      })}
    />
  );
};
  

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

  .button: not (.active) {
  
}
  

Как бы вы сделали это в Tailwind? Возможно, вам придется вернуться к использованию директив @apply , или вам нужно будет связать имена классов в : не .

3. Попутный ветер блокирует вас в парадигме служебного CSS

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

Существуют такие инструменты, как Windy для преобразования существующего CSS в Tailwind, что кажется довольно простым делом. В конце концов, Tailwind просто разбивает «составные» семантические классы на «атомарные» служебные классы, которые имеют единственную ответственность. Если у вас есть .some-thing , который применяет кучу CSS, вы можете легко сопоставить .CSS-правила some-thing для классов Tailwind.

Но я не могу представить, что можно создать инструмент, который делает наоборот: конвертирует Tailwind в семантический HTML и CSS . Единственное, во что вы могли бы реально преобразовать Tailwind, - это какую-нибудь другую служебную среду (например, Bootstrap), которая блокирует вас своим собственным синтаксисом и именами классов.

Поскольку классы Tailwind являются атомарными строительными блоками, которые выполняют только одну задачу, вы не сможете построить из них более сложные, семантические вещи, не собрав эти классы вручную.В конце концов, какие предположения автоматизированный инструмент сделает в отношении желаемых вами соглашений об именах? Что это за div , img или ul , что я ищу? Как мне это назвать ?

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

4. Попутный ветер раздувается

Примечание : Здесь я ошибаюсь. Мне следовало больше изучить Tailwind, чтобы понять, что на самом деле это , а не так медленно, как я первоначально думал. Ниже представлена ​​отредактированная версия, поясняющая, почему Tailwind на самом деле не раздувается и не работает медленно (если вы не используете его неправильно).

Tailwind использует PurgeCSS, который удаляет все неиспользуемые стили из вашей скомпилированной таблицы стилей. В документации Tailwind отмечается следующее:

При удалении неиспользуемых стилей с помощью Tailwind очень сложно получить более 10 КБ сжатого CSS.

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

Вы можете видеть, что сайты варьируются от очень низкого уровня до примерно 30 kB . CSS моего собственного сайта написан на SCSS и имеет размер 7,0 kB (также сжатый Brotli), который находится в нижней части этих примеров (которые, опять же, являются довольно маленьким образцом).

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

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

5. Попутный ветер - ненужная абстракция

Все классы Tailwind атомарны и несут единственную ответственность. Но разве это хорошо?

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

Если вам нужно сгруппировать связанные стили под многократно используемым именем класса, в документации Tailwind рекомендуется использовать директиву @apply :

  <кнопка>
  Нажми на меня


<стиль>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 текст-белый шрифт-полужирный закругленный-lg shadow-md hover: bg-indigo-700 focus: outline-none focus: ring-2 focus: ring-indigo-400 focus : непрозрачность кольца-75;
  }

  

Однако @apply в первую очередь лишает смысла использование служебной инфраструктуры CSS.Теперь вы не только генерируете больше выходного CSS, потому что эти наборы правил Tailwind дублируются, но вы также возвращаетесь к семантической парадигме CSS, которая предположительно является плохой. Если вам нужно использовать @apply , вам лучше просто написать ванильный CSS с настраиваемыми свойствами. Сам Адам не рекомендует использовать @apply и вместо этого предлагает вам составить свои классы Tailwind с компонентами.

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

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

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

Редактировать : Я все еще придерживаюсь своих первоначальных позиций, но я хотел бы отметить, что Tailwind имеет очень сильную привлекательность по одной ключевой причине: он сокращает набор из бесконечного количества пар свойство-значение до строгого набора конечного дизайна. токены, чтобы держать вас под контролем, чтобы вы не вытаскивали произвольные значения из воздуха. Это всегда хорошо. Однако подумайте, действительно ли вам нужен попутный ветер. Ванильный CSS (и препроцессоры CSS) уже предлагают переменные (в области CSS мы называем их настраиваемыми свойствами).Пока вы создаете свои собственные токены дизайна / переменные темы, вы никогда не столкнетесь с этой проблемой. Фактически, именно так Tailwind работает под капотом.

6. Семантика важна. Попутный ветер отказывается от этого.

Один из наиболее часто цитируемых аргументов в пользу Tailwind заключается в том, что семантический CSS трудно реализовать на практике, потому что трудно давать названия объектам. Адам утверждает, что это нарушает принцип разделения проблем, потому что теперь ваша разметка HTML диктует ваш CSS. Фактически, вы принимаете решения в своем HTML, которые действительно принадлежат вашему CSS.Но давайте задумаемся на секунду: действительно ли это проблема?

Для начала, если вы не знаете, как назвать этот

  
 Джон Доу 
 7 декабря 2020 г. 


  
 Аннотация 
  
... 
  

  
 ... 
 ... 
 ... 
 ... 
  

  
  ...
  

   ⊕