[Внешний словарь] 9 советов по CSS, которые сделают вас счастливее

предисловие

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

9 CSS-трюков

Настоящим заявляется, что упомянутый здесь CSS включает в себя не только CSS, но и препроцессоры CSS (Less Sass и т. д.).

Текст начинается сейчас.

1. Рекомендуется использовать padding вместо margin

Когда мы восстанавливаем дизайн-проект,paddingиmarginДва часто используемых свойства, но мы знаемПоля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться., так что еслиmarginПри слишком частом использовании вертикальное расстояние Box может перекрываться.

Другая проблема заключается в том, что первый дочерний элементmargin-topОшибка, из-за которой значение добавлялось к родительскому элементу (последнему дочернему элементу).margin-bottomАналогичная проблема есть). Кто-нибудь здесь спросит, почему?

Причина в том, что:

the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

Это переводится как:

всех соседних двух или более элементов коробкиmarginбудут объединены в одинmarginобщий. Смежность определяется как: одноуровневые или вложенные элементы блока без непустого содержимого между ними,PaddingилиBorderразделены.

Что касается причины слияния, я лично думаю, что это похоже на безопасное расстояние в очереди.Безопасное расстояние между людьми составляет 1 м. Если безопасное расстояние не будет объединено, станет ли расстояние между людьми равным 2 м, когда мы в очереди? Конечно, это, вероятно, не так.

Таким образом, мы можем использовать первый элементpaddingзаменитьmargin. Конечно иногдаpaddingЕсли спрос не может быть удовлетворен, вы также можете поднять шумиху на условии «непустого контента». То есть добавить псевдоэлемент к родительскому элементу.

Итак, мы используемmarginОбязательно обратите внимание на проблему схлопывания полей.

2. позиция: исправлена проблема понижения версии

Я не знаю, сталкивались ли вы с эффектом потолка в прошлом, просто используйтеposition:fixedэто свойство. На самом деле, если его родительский элемент используетсяtransform,fixedбудет понижен доabsolute.

решение:

Поскольку он будет понижен доabsoluteЭффект, как мы можем решить эту проблему? Что мы будем рассматриватьfixedиabsoluteПроизводительность будет такой же.

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

Если есть прокатка элементов в прямом родителе, то добавляемoverflow-y: auto.

3. Разумно используйте такие единицы, как px | em | rem | %.

В CSS есть много единиц измерения расстояния, таких как px | em | rem | %, а также vh | vw и другие единицы измерения в CSS3.

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

базовый блок пикселей

px — это первая единица, с которой мы столкнулись, но мы не используем ее очень часто в соответствии с требованиями мобильной адаптации; я резюмирую варианты использования следующим образом:

меньший образец

Например, нам нужно нарисовать круг с r равным 5px.Если мы используем rem в качестве единицы, мы скоро обнаружим, что узор на некоторых моделях не круглый, а будет казаться эллиптическим. Это связано с потерей точности при преобразовании rem в px.

Итак, на данный момент нам нужно использовать px с dpr для достижения:

// less 
/*@size 建议取双数*/
.circle(@size, @backgroundColor) {  
    width: @size;
    height: @size;
    background-color: @backgroundColor;
    [data-dpr="1"] & {
        width: @size * 0.5;
        height: @size * 0.5;
    }
    [data-dpr="3"] & {
        width: @size * 1.5;
        height: @size * 1.5;
    }
}

Проблема с тонкой линией 1px

Я рассмотрю этот вопрос в отдельном разделе ниже, поэтому не буду повторяться здесь.

Размер шрифта (в основном используйте rem как единицу измерения)

Я также использую rem как единицу измерения размера шрифта в целом, потому что потеря точности допустима.

Относительная единица бэр

rem — относительная единица (корневая em), добавленная в CSS3, то есть значение размера шрифта относительно корневого элемента HTML.

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

Относительная единица em

em также является относительной единицей, но относительно размера шрифта текста в текущем объекте.

line-height

Обычно рекомендуется вline-heightИспользуйте их. Потому что, когда вам нужно настроить размер шрифта, вам нужно всего лишь изменитьfont-sizeзначение, в то время какline-heightОн был установлен на относительную высоту строки.

Отступ первой строки на два символа

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

text-indent: 2em

Единицы области просмотра vw | vh

vw: 1vw = 1% ширины области просмотра
vh: 1vh = 1% высоты области просмотра

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

Так есть ли решение этой проблемы со связью?

Ответ: единицы области просмотра vw | vh.

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

$vm_fontsize: 75;
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

4. Используйте переменные с умом

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

Sass и Less немного отличаются:

// sass
$direction: left;
// less
@direction: left;

Разумеется, в CSS тоже есть переменные, правила использования таковы:

Синтаксис определения переменной: --*; // * — имя переменной.

Для переменных используется следующий синтаксис: var(*);

И определение, и использование переменных можно использовать только внутри блока объявления {}
Переменные символы CSS ограничены: [0-9], [a-zA-Z], _, -, китайский, корейский и т. д.

:root {
    --blue_color: #3388ff;
    --main_bgcolor: #fafafa;
    --font_size_12: 12px;
    --font_size_14: 14px;
    --color: 20px;
}
.div1{
    background-color: var(--main_bgcolor);
    font-size: var(--font_size_12);
}

5. Используйте Mixins для сортировки повторяющихся стилей

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

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

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

В это время свою роль может сыграть миксин (можно понимать как класс в классе).

Вот стиль описательного текста:

.font-description {
    .font-des-style(24px,#fff,1.5em);
    .line-camp(2);
}

// less
/* 多行显示 */
.line-camp( @clamp:2 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    -webkit-box-orient: vertical; 
}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {
    font-size: @fontSize;
    color: @color;
    line-height: @lineHeight;
    text-align: @textAlign;
}

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

6. Схема 1px

Внешний интерфейс, который выполнил требования мобильного терминала, определенно неизбежен.1pxПроблема тонкой линии, причина этой проблемы в том, что пользовательский интерфейс предъявляет все более высокие требования к эстетике страницы (не говорите мне, что это проблема экрана сетчатки).

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

Использовать псевдокласс + преобразование

.border_bottom { 
    overflow: hidden; 
    position: relative; 
    border: none!important; 
}
.border_bottom:after { 
    content: "";
    display: block;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    background-color: #d4d6d7; 
    -webkit-transform-origin: 0 0;  
    transform-origin: 0 0; 
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

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

Моделирование с помощью box-shadow

.border_bottom {
  box-shadow: inset 0px -1px 1px -1px #d4d6d7;
}

Эта схема может в принципе соответствовать всем сценариям, но есть недостаток, что цвет станет светлее.

Спасибо D Wenbin за то, что поделился другим решением:Эта схема обрабатывает dpr по-другому, что можно охарактеризовать как более совершенную.

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}

7. Наследуйте box-sizing от html-элементов

В большинстве случаев мы устанавливаем элементborderиpaddingне хочу менять элементwidth,heightзначение, в это время мы можем установить элементbox-sizing:border-box;.

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

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Преимущество этого в том, что он не будет закрывать другие компонентыbox-sizingзначение без необходимости многократно устанавливать его для каждого элементаbox-sizing: border-box;.

8. Встраивайте важные CSS в верхней части страницы

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

Как показано на рисунке:

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

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

9. Текст выходит за пределы опущения, и текст выровнен по обоим концам

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

кроме упущения

.line-camp( @clamp:2 ) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @clamp;
    -webkit-box-orient: vertical; 
}

Возникшие проблемы:

-webkit-box-orient: verticalЭтот код будет удален при упаковке с помощью webpack, причина в том,optimize-css-assets-webpack-pluginпроблема с этим плагином.