Убрать стили input css

focus это важно, а outline нет

Состояние фокуса это очень важный момент для взаимодействия с интерективными элементами. (Как и почему здесь). Но outline зачастую не вписывается в дизайн. И сами дизайнеры редко прорисовывают это состоние, потому частой практикой стало дублирование стилей ховера.

Нормальные дизайнеры всегда прорисовывают состояние фокуса.

Три основных состояния должны всегда присутствовать на каждом интерактивном элементе ( :hover, :focus, :active ).

Отступы

Отступы обнулены, текстовые свойства наследуются.

 p, dd, dl, figure, blockquote < margin: 0; >/* Совутую не забывать о списке определений . Семантика это хорошо. Для более удобного использования можно позьзоваться дивом (валидно): dl>div*3>dd+dt */ blockquote, q < quotes: none; >ul, ol < padding: 0; margin: 0; list-style-type: none; >table < border-collapse: collapse; border-spacing: 0; >th < font-weight: inherit; >h1, h2, h3, h4, h5, h6 < margin: 0; font-size: inherit; font-weight: inherit; >audio, video < display: block; >img < display: block; border: none; /*max-width: 100%;*/ >iframe < border: none; >pre, code, kbd, samp

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

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

О том, каким может быть пользовательский контент:

Текстовые элементы

Полное наследование. Ссылки больше не синие, стронг не болд, ем не италик. Em, strong это семантические элементы, они используются не для оформления. Например для названиях товаров, в карточках. То что они имеют по дефолту стили не значит, что они будут нужны именно в том, месте где используется этот тег.

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

 a < background-color: transparent; text-decoration: none; color: inherit; >abbr < border: none; text-decoration: none; >b, strong < font-weight: inherit; >i, em < font-style: inherit; >dfn < font-style: inherit; >mark < background-color: transparent; color: inherit; >small < font-size: inherit; >sub, sup < position: relative; vertical-align: baseline; font-size: inherit; line-height: 0; >sub < bottom: -.25em; >sup

Элементы форм:

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

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

 button, input, optgroup, select, textarea < padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background-color: transparent; font: inherit; /* По дефолту, шрифтовые свойства, для этих элементов не наследуются */ color: inherit; letter-spacing: inherit; >button, input < overflow: visible; >button, select < text-align: left; text-transform: none; >button, [type='button'], [type='reset'], [type='submit'] < cursor: pointer; -webkit-appearance: none; >textarea < resize: none; overflow-y: auto; overflow-x: hidden; >button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner < border: none; padding: 0; >button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring < outline: none; >[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button < height: auto; >[type='search']::-webkit-search-decoration < -webkit-appearance: none; >[type='search'] < outline: none; >::-webkit-file-upload-button

(Тег button нельзя использовать как флекс контейнер. На IOSах сломается.)

fieldset и legend

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

Никогда так не делайте, это пример худшей практики. Вот пару примров с нормальной реализацией:

(Тег fieldset нельзя использовать как флекс контейнер. Не работает просто.)

select

Отменяем стандартное отображение select’а

placeholder

 ::-webkit-input-placeholder < color: inherit; opacity: 1; transition: opacity .3s; >::-moz-placeholder < color: inherit; opacity: 1; transition: opacity .3s; >:-moz-placeholder < color: inherit; opacity: 1; transition: opacity .3s; >:-ms-input-placeholder < color: inherit; opacity: 1; transition: opacity .3s; >:focus::-webkit-input-placeholder < opacity: 0; >:focus::-moz-placeholder < opacity: 0; >:focus:-moz-placeholder < opacity: 0; >:focus:-ms-input-placeholder

Плейсхолдер наслудует цвет. Исчезает при фокусе.

svg (работа с иконками)

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

Расскажу, как мы работаем с иконками:

Иконочный шрифт мы не используем.

— одноцветные
— цветные (иконки и мелкие изображения).

Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется. Выглядит это так:

И инклюдится на страницу он так:

И стили для него: (этот код добавляется в файл)

Для цветных используется css спрайт:

Загружается css спрайт асинхронно

Генерируется это, понятное дело, галпом.

Что дает такой подход

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

hidden

Атрибут, который скрывает элемент. Пригодится.

:disabled

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

::-ms-clear

Псевдоэлемент в инпуте IE для очистки текста.

:-webkit-autofill

С помощью внутренней тени закрашиваем этот псевдоэлемент под нужный цвет. И наследует заданный цвет.

::selection

Классы

.clearfix

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

.visually-hidden

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

Для кастомизация цекбоксов/радиобаттонов:

Скрывать с помощью display: none; или атрибута hidden плохая идея, так как инпут теряет способность получать фокус, а фокус (как мы знаем) это важно.

А если скрывать с помощью класса .visually-hidden то инпут не теряет способность получать фокус.

Метод «padding-bottom» для изображений (.cover-pic, .contain-pic.)

В работе с изображениями, а именно с тегом

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

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

И чтоб этого не происходило, высота задается за счет padding в % для псевдоэлемента обертки (:before). Как известно padding в % берет значение ширины родителя, не зависимо заданы вертикальные или горизонтальные значения.

(padding в % некоректно отображается в мозиле, если он задан флекс итему).

Само изображение нужно спозиционировать абсолютно относительно обертки. Когда необходимо, чтоб изображение занимало все пространство (на подобии background-size: cover;). Используется класс .cover-pic

 .cover-pic, .contain-pic < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.cover-pic < object-fit: cover; >.contain-pic

Когда необходимо, чтоб изображение занимало не все пространство (на подобии background-size: contain;). Используется класс .contain-pic

• Изображение резинится.
• Имеет нужные пропорции (заданы дизайном).
• Не дергает контент при подгрузке.

Тем же методом сверстаны изображения в инстаграмме, только они нарезаются нужной формы и необходимость в object-fit отпадает.
→ Пример

Прижатие футера

Фикс при прижатии футера для IE. В блоке с min-height (которым в данном случае служит body) flex некоректно работает.

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) < html < display: flex; flex-direction: column; >> 

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

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

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

P. S. Советую ознакомиться с публикацией Организация отступов в верстке (margin/padding). И советую использовать css линтеры. И кому интересно, может решить css задачку.

Источник