Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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? Ответ всё тот-же — приоритет. Разберемся при помощи простой таблицы, какие стили получит элемент и почему:

Тег, например p: 1
Класс, например .class: 10
ID, например #main: 100
Inline-стиль, например style=»font-size: 16px;»: 1000

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

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 правила, который складывается из веса отдельных селекторов этого правила. Стили менее весомых правил перебиваются стилями более весомых. В результате элемент получает собранные стили от самых «весомых» правил. Все это и есть каскадность.

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

Тип селектора Описание селектора Вес (число)
* универсальный селектор 0
div тег 1
:first-letter псевдо-элемент 1
.text класс 10
:hover псевдо-класс 10
[атрибут=»значение»] селектор атрибута 10
#content селектор по id 100
style=»color:red;» стили в style атрибуте 1000
!important суффикс увеличения веса 10000

Из правил с одинаковым весом выбираются те, которые ближе к концу 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
} 

Пример:

< html >

< головка >

style >

/ * Определение стилей выбранных элементов, h2 и

остальная часть тела * /

[class * = "str "] {/ * ИСПОЛЬЗУЕМ * ЗДЕСЬ * /

фон: зеленый;

цвет: белый;

}

h2 {

цвет: зеленый;

}

body {

выравнивание текста: по центру;

ширина: 60%;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< div class div "first_str" > Первый элемент div. = ”value”] используется для выбора тех элементов, значение атрибута которых начинается с as указана стоимость стр. .ЗДЕСЬ * /

фон: зеленый;

цвет: белый;

}

h2 {

цвет: зеленый;

}

body {

выравнивание текста: по центру;

ширина: 60%;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< div класс = 900rf31 "st > Первый элемент div. div >

< div class = "strsecond" > Второй элемент div. div >

< div class = "str-start" > Третий элемент div. div >

< div class = "end-str" > Четвертый элемент div. div >

< p class = "my" > Текст абзаца p >

body >

html >

Выход:

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

Синтаксис:

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

Пример:

< html >

< головка >

style >

[class $ = "str"] {/ * МЫ ИСПОЛЬЗУЕМ $ ЗДЕСЬ * /

фон: зеленый;

цвет: белый;

}

h2 {

цвет: зеленый;

}

body {

выравнивание текста: по центру;

ширина: 60%;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< div class = 900str31 "первый класс = 900str31 " > Первый элемент div. div >

< div class = "stsecondstr" > Второй элемент div. div >

< div class = "start" > Третий элемент div. div >

< p class = "mystr" > Это какой-то текст в абзаце. p >

корпус >

html >

Выход:

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

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

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

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

Кнопка, созданная Twitter с анимацией HTML5 / SVG и CSS3
Демонстрационное изображение: кнопка, созданная Twitter с анимацией HTML5 / SVG и CSS3
Twitter Like создан только с использованием анимации SVG и CSS3.

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

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

Кнопка "Нравится" при наведении курсора
Демонстрационное изображение: кнопка «Мне нравится» при наведении курсора мыши

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

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

Интерактивная кнопка "Нравится"
Демонстрационное изображение: интерактивная кнопка со значком

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

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

Анимированная кнопка «Мне нравится»
Демонстрационное изображение: Анимированная кнопка «Мне нравится»

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

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

Кнопка "Мне нравится" в Twitter
Демо-изображение: кнопка «Нравится» в Twitter

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

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

Кнопка Like с анимированным фоном в AngularJS
Демонстрационное изображение: AngularJS Like Button с анимированным фоном

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

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

Кнопка избранного на чистом CSS
Демонстрационное изображение: кнопка избранного на чистом CSS

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

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

Переключатель кнопки Heart Like
Демонстрационное изображение: Переключатель кнопки Heart Like

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

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

Кнопка «Мне нравится» в Facebook
Демонстрационное изображение: Кнопка «Мне нравится» в Facebook

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

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

Кнопка Like с JS
Демонстрационное изображение: кнопка 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 ();
}

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.Но давайте задумаемся на секунду: действительно ли это проблема?

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

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

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

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

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

Наконец, помните тот момент, который я затронул ранее, о том, как Tailwind CSS продвигает уродливую разметку HTML? Сторонники фреймворка обычно отвечают, напоминая вам, что вы, вероятно, в любом случае работаете с компонентным фреймворком, таким как React, и поэтому вряд ли вы увидите гигантское море разметки в одном файле.Честная оценка.

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

Короче говоря, Tailwind делает вид, что решает проблему, которая на самом деле не является проблемой.

Edit : Tailwind не лишен полностью какой-либо семантики. У него просто своего рода семантики. Однако я бы сказал, что всегда лучше иметь возможность давать имена своим субкомпонентам, даже на самом атомарном уровне. Называть вещи сложно, но я считаю, что от этой трудности не стоит уклоняться: это хорошо. Это заставляет вас задуматься о том, что вы создаете, и дать свою семантику разметки, которой иначе не было бы.Тем не менее, у семантического CSS есть свои недостатки. Если у вас нет единых стандартов именования, каждый в вашей команде может придумать свой собственный творческий вариант БЭМ.

7. Попутный ветер, инструменты для разработчиков и опыт разработчиков

Сложнее настроить CSS в инструментах разработчика

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

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

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

Сложнее найти компоненты в инструментах разработчика

Точно так же, если мне дается ошибка пользовательского интерфейса в большой базе кода, мне нравится сужать затронутый компонент в моих инструментах разработки, используя имена классов, идентификаторы или, в крайнем случае, переведенные строки.Это упрощает переход прямо к коду, который мне нужно изучить, чтобы выяснить, что пошло не так, особенно если существует тесное соответствие между именем компонента и именами классов, которые он использует (например, если ваша команда использует БЭМ). Если вы используете Tailwind, у вас есть только две вещи, от которых вы можете отказаться в инструментах разработки: ваши знания в этой конкретной области приложения и строки. Последнее не всегда полезно, потому что строки могут повторно использоваться в нескольких компонентах, поэтому их поиск может дать несколько результатов.И не все в команде знакомы с каждым компонентом в базе кода, как в монорепозитории для приложения масштаба предприятия. Это может расстраивать новых сотрудников.

Перекомпиляция HTML медленнее, чем перекомпиляция CSS

Что касается опыта разработчиков, здесь есть связанная проблема в генераторах статических сайтов и серверных фреймворках, таких как Next.js: перекомпиляция CSS намного быстрее, чем горячая перезагрузка страницы из-за изменений разметки. Попутный ветер форсирует последнее, что может замедлить ваш процесс разработки.Это особенно раздражает в генераторах статических сайтов, таких как Jekyll или 11ty, где изменение имени класса на уровне макета может вызвать полную перестройку множества разных страниц, а это означает, что вам нужно подождать несколько секунд, пока ваш браузер перезагрузится. Для сравнения: перекомпиляция Sass для моего сайта занимает всего несколько миллисекунд.

8. Попутный ветер по-прежнему отсутствуют некоторые ключевые особенности CSS

Спустя почти два года после своего первого выпуска, Tailwind CSS все еще не поддерживает псевдоэлементы (среди других функций), то, что базовые препроцессоры CSS и CSS поддерживали в течение многих лет.Если бы это было реализовано, вам, вероятно, пришлось бы раньше писать что-то вроде : content-empty-string в вашем HTML. Для сравнения, простой CSS-эквивалент гораздо более разборчивый.

Я подозреваю, что реализовать эту функцию нереально. Как для :: before , так и для :: после вам, возможно, потребуются тысячи уникальных имен классов, чтобы вы могли стилизовать свои псевдоэлементы по мере необходимости. Это просто нереально. Чем больше классов решит ввести Tailwind, тем сложнее будет расти его сложность - до такой степени, что ее невозможно будет поддерживать.

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

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

Вот несколько альтернатив Tailwind, которые могут вам понравиться:

  • Напишите ванильный CSS и используйте настраиваемые свойства для создания собственной системы дизайна.
  • Используйте препроцессор. Я большой поклонник Sass, но вы также можете использовать Less.
  • Используйте библиотеку CSS-in-JS, например, styled-components или styled-jsx.
  • Напишите ванильный CSS с компонентной областью видимости с помощью модулей CSS.

Я пробовал все эти подходы, и все они имеют свои преимущества и недостатки. Для статических проектов я предпочитаю использовать препроцессор CSS, например Sass; Я большой поклонник определения пользовательских миксинов и функций для ускорения разработки, и замечательно то, что я все еще могу комбинировать Sass с ванильными функциями CSS (такими как пользовательские свойства). С другой стороны, если я работаю с кодовой базой React, я предпочитаю использовать styled-jsx (для динамического CSS с интерполированными значениями) или модули CSS (для статического CSS).

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

По всем этим причинам я не рекомендую использовать Tailwind.

В превью этой статьи в социальных сетях используется логотип Tailwind CSS, авторские права на который принадлежат Tailwind Labs Inc.

LaTeX.css - Сделайте свой веб-сайт похожим на документ LaTeX

Начало работы

  • Добавлять
    <ссылка rel = "таблица стилей" href = "https://latex.now.sh/style.css">
    в вашего веб-сайта или установите
    пакет с использованием npm install latex.css .
  • (необязательно) Добавьте любые классы к элементам, описанным в
    следующий раздел.
  • (необязательно) Если вам нужна поддержка
    Математика LaTeX, добавить
    следующий сценарий для включения
    MathJax:

        
  • (необязательно) Если вам нужна подсветка синтаксиса, добавьте
    следующий сценарий для включения
    Prism и таблица стилей Prism LaTeX (или используйте любую другую):

      
    
      
  • Готово.

Элементы на основе классов

Автор и аннотация

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

  

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

Аннотация

...

Теоремы, определения, леммы и доказательства

Поддерживаются теоремы, определения, леммы и доказательства. Просто заверните свой
content в div и добавьте соответствующий класс к элементу, например
в следующем примере.

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

Ниже приведены некоторые примеры.

Доказательства и теоремы

Действительные числа $ \ mathbb {R} $ неисчислимы.{-я}
\ in [0,1] $$ с $ \ bar {c} _ {i} \ neq c_ {i} (i) $. Очевидно, $ C (n) \ neq x $
для всех $ n \ in \ mathbb {N}. $ Следовательно, $ C $ не включен. Противоречие.

Если $ S $ одновременно счетно и бесконечно, то существует биекция
между $ S $ и самим $ \ boldsymbol {N} $. 1

Для любого $ s \ in S, $ обозначим через $ f (s) $ значение $ k $ такое, что $ s $
является $ k $ наименьшим элементом $ S. $ Это отображение корректно определено для
любые $ s, $, потому что между конечным числом натуральных чисел
1 и $ s.$ Невозможно, чтобы два разных элемента $ S $ были
быть $ k $ наименьшим элементом $ S $. Следовательно, $ f $ взаимно однозначно. Также,
поскольку $ S $ бесконечно, $ f $ включен.

Леммы

Четное число плюс четное число дает четное число.

Определения

Определение - это изложение значения слова или группы слов.
или знак или символ. 2

Языковая поддержка

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

  
  ...
  

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

Примечания

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

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

  

    

Если вам не нужны надстрочные числа, вы можете отказаться от класса sidenote-number , и примечанию не будет назначен номер.На меньшем экране вам нужно будет добавить символ внутри ярлыка , чтобы пользователь мог щелкнуть по нему. ⊕Это примечание без номера.

Фрагмент заметки на полях без номера очень похож:

  

    

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

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

Альтернативный шрифт

LaTeX.css по умолчанию использует Latin Modern. Если вам не нравится этот шрифт (трудно читаемый, слишком тонкий и т. Д.), Вы можете переключиться на семейство шрифтов Libertinus , добавив класс libertinus к тегу .Нажмите кнопку ниже, чтобы переключиться между Latin Modern и Libertinus.

Текущий шрифт: Latin Modern

Элементы HTML

Для предварительного просмотра всех элементов HTML с помощью LaTeX.css ознакомьтесь с
Тестовая страница элементов HTML5.

Форматирование текста

Это предложение выделено жирным шрифтом . Если вам нравится семантика, вы можете использовать
сильное или усиленное текста. Если не,
курсив все еще существует. Мелкий текст для штрафа
Распечатать. Ваша копия также может быть с подпиской и
с надстрочным индексом , вставлено, удалено, или
выделил . Вы бы использовали
гиперссылка для перехода на новую страницу. Ввод с клавиатуры
такие элементы, как Cmd + Shift
используются для отображения текстового ввода пользователя.

Цитаты

Дайте мне шесть часов, чтобы срубить дерево, и я потрачу первые четыре
заточка топора.{n-k} $$

Таблицы

Образец таблицы с описательной подписью.
Заголовок 1 Заголовок 2 Заголовок 3
Нижний колонтитул 1 Нижний колонтитул 2 Нижний колонтитул 3
Описание 1 Описание 2 Описание 3
Описание 1 Описание 2 Описание 3
Описание 1 Описание 2 Описание 3
Пример таблицы взят из этого
статья о том, как создавать таблицы качества с помощью LaTeX.
Арт.
Животное Описание Стоимость ($)
Комар за грамм 13,65
GNU фаршированные 92,50
эму фаршированные 33.33
Армадилло замороженные 8,99

Изображения

Горный пейзаж - пользователем
Джон Таунер.

Разное

Переполнение прокрутки

Лучше всего разбивать длинные уравнения на более мелкие части, но если это невозможно, подумайте о переносе
переполняющийся элемент с классом scroll-overflow to
разрешить прокрутку по оси абсцисс.{5} + \ ldots $$

Подсветка синтаксиса

Если вам нужна подсветка синтаксиса для кода, LaTeX.css предоставляет тему PrismJS
который имитирует отчеканенный пакет для LaTeX. Добавьте следующее
таблица стилей и скрипт:

  

  

И используйте это так:

  
  <код>
    
  

Измените, какие языки выделяет Prism, настроив здесь скрипт.

Любите JavaScript, но ненавидите CSS?

Читатель написал, что им очень понравилось работать с JS и React, но когда дело дошло до стиля, они были в недоумении.

Я люблю JavaScript, но ненавижу CSS. У меня просто не хватает терпения, чтобы что-то выглядело хорошо.

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

Но тогда: о, черт, CSS .Приложение работает нормально, но выглядит ужасно, и никто не воспримет его всерьез, потому что оно не похоже на Apple (TM).

Ты не одинок

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

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

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

Стиль - это не дизайн

Итак, мы находимся на одной странице, давайте поговорим о разнице между style и design .

Я считаю это стилем , когда вы берете существующий визуальный дизайн и пишете CSS для преобразования фрагмента div s в соответствие с макетами / каркасами.

С другой стороны, взять чистый холст и создать красивый веб-сайт - это design .

Вы можете быть хорошими (даже очень хорошими) в одном из них, одновременно не имея навыков в другом.

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

Можете ли вы избежать CSS?

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

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

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

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

Что делать

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

Flexbox

Макет

Flexbox - это современный способ размещения контента с использованием CSS, гораздо более простой в использовании, чем float s или старые таблицы (или случайные удары ножом в темноте, которые вы делали 5 минут назад).Он имеет хорошую поддержку браузера и упрощает выполнение некоторых вещей, которые традиционно были большой проблемой с CSS, например, с вертикальным центрированием .

Взгляните на это:

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

  дисплей: гибкий; / * включаем флексбокс * /
justify-content: center; / * по центру по горизонтали * /
align-items: center; / * по центру по вертикали * /  

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

В

CSS Tricks есть отличное полное руководство по Flexbox, если вам интересно узнать больше. Предлагаю это проверить! Flexbox действительно помог мне освоить CSS, и сейчас это мой инструмент для решения большинства проблем с версткой.

Также ознакомьтесь с этой игрой Flexbox Froggy для интерактивного изучения Flexbox в вашем браузере.

CSS-сетка

Grid - еще более современный способ разметки и более мощный, чем flexbox. Он может обрабатывать 2 измерения (строки и столбцы), тогда как flexbox лучше справляется в том или ином направлении. Браузерная поддержка хороша. Согласно CSS Tricks:

По состоянию на март 2017 года большинство браузеров имели встроенную поддержку CSS Grid без префиксов: Chrome (в том числе в Android), Firefox, Safari (в том числе в iOS) и Opera. Internet Explorer 10 и 11, с другой стороны, поддерживает его, но это старая реализация с устаревшим синтаксисом.Пришло время строить с сеткой!

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

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

Вы можете прочитать «Полное руководство CSS Tricks по CSS Grid», чтобы узнать больше.

Существует также эта забавная игра Grid Garden, в которой можно изучить основы прямо в браузере.

Логический подход

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

Вместо этого попробуйте более методичный подход.

  • поместить элемент в нужное положение (флексбокс, сетка или, возможно, абсолютно позиционировать внутри относительного контейнера)
  • установить поля и отступы
  • установить границу
  • установить цвет фона
  • затем нарисуйте остальную часть совы - добавьте тени блока, установите: hover /: active /: состояния фокуса и т. Д.

В некотором смысле принципы разработки программного обеспечения, такие как DRY (Не повторяйся) и Закон Деметры, могут применяться к стилизации элементов на странице. В качестве примера рассмотрим этот макет сообщения пользователя с его аватаром:

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

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

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

Лучшим способом сделать этот макет будет установка поля padding на 20px , чтобы содержимое могло блаженно не знать, где оно должно быть. Это также упрощает добавление новых элементов внутри блока - вам не нужно явно указывать каждому элементу, где его разместить.

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

Хотите, чтобы макет был собран воедино? Ознакомьтесь с моим руководством по макету CSS.

Каркасы

Фреймворки

CSS могут помочь вам быстро приступить к работе над проектами и даже восполнить недостаток навыков проектирования. Обычно они доступны в виде устанавливаемых библиотек с помощью npm / yarn или из CDN.

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

Вот несколько популярных вариантов:

  • Tailwind CSS - Tailwind - это «CSS-фреймворк, ориентированный на служебные программы», и в нем используется другой подход, чем в большинстве других.Он поставляется с набором служебных классов, которые упрощают применение стилей непосредственно в HTML. Многие люди клянутся, насколько они более продуктивны. Создатель, Адам Уотан, разместил на сайте хорошо сделанный набор бесплатных скринкастов, объясняющих, как им пользоваться. Приятным побочным эффектом Tailwind является то, что названия классов не слишком сильно отклоняются от того, как на самом деле работает . Записать class = "flex justify-center items-center" в div проще, чем написать сам CSS, но вы можете в значительной степени читать его, как CSS (и это также поможет вам стать лучше в CSS!).Однако не всем нравится подход служебных классов с большим количеством имен классов в HTML. Старайтесь не списывать со счетов с первого взгляда.

  • Bootstrap - Чрезвычайно популярный (читайте: множество вопросов и ответов по SO) и приличный вид. Последняя версия (v4) выглядит более современно, но в наши дни старые могут выглядеть немного устаревшими. Вы можете настроить его с помощью собственного CSS или использовать бесплатные и платные темы, чтобы изменить внешний вид. Если вы используете React, обратите внимание на response-bootstrap, где вы найдете множество готовых компонентов, таких как модальные диалоги, всплывающие окна, формы и т. Д.

  • Ant Design - красивая дизайн-система с версиями для React, Vue и Angular.

  • Material UI - специфичный для React UI фреймворк, использующий систему Material Design от Google. Если вам нравится внешний вид Google, посмотрите этот.

Действия!

  1. Найдите 3 макета для копирования. Это могут быть небольшие элементы сайтов, которые вы используете (один твит, карта Pinterest и т. Д.), Или физические вещи, такие как кредитная карта или обложка книги.
  2. Прочтите полное руководство по Flexbox.
  3. Используйте flexbox для создания макетов, выбранных на шаге 1.
  4. Прочтите мое руководство по макету CSS, чтобы узнать, как преобразовать эскиз в HTML и CSS.

Успех! Теперь проверьте свою электронную почту.

базовых селекторов - семинар по макету CSS

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

Мастер-класс по макету CSS: основные селекторы

Селекторы элементов

Самый простой из селекторов - это селектор элемента .Например, абзацы в документе HTML представлены элементом p и заключены в теги

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

  п {}  

Чтобы выбрать все заголовки уровня 1, мы использовали бы селектор h2 .

  h2 {}  

Селекторы элементов будут применять CSS к каждому экземпляру этого элемента в вашем документе.

Селекторы классов

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

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

  

Содержимое

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

  .box {}  

Иногда вы можете увидеть, что класс добавлен к элементу в CSS, например:

  п.бокс {}  

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

  

Содержимое

Содержимое

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

Селекторы идентификаторов

Другой способ выделить один элемент - присвоить ему идентификатор в разметке.

  

Содержимое

В CSS мы выбираем идентификатор с помощью символа # .

  # коробка {}  

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

.

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

Ваш адрес email не будет опубликован.