Что интересного есть в вашем стандартном шаблоне?

Question

[Serj-One]

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

Делаем, чтобы размеры включали в себя значения padding и border:

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

clearfix:

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}

Прижимаем footer:
UPD для подписавшихся.
Метод Райана Фэйта уступил место более удобному Bootstrap sticky footer.

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

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

Естественно, + normalize.css

А какие классы и наборы свойств лежат в вашем стандартном шаблоне?

Answer 1

[Vadim Bogomazov]

Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
Заменяем длинный текст placeholder многоточием:

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

Скрываем placeholder при фокусе:

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Курсор для label + отмена раздражающего выделения при клике:

label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Только вертикальный ресайз для textarea (horizontal часто ломает диз):

textarea {
	resize: vertical;
}

Убираем дефолтный курсив у address:

address {
	font-style: normal;
}

Убираем подсветку полей:

input:focus,
textarea:focus {
		outline: none;
}

Адаптивные img:

img {
	height: auto;
	max-width: 100%;
	width: auto\9;
}

Адаптивные видео:

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Перенос слов:

.break-word {
        word-wrap: break-word;
}

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

Нумерованный список с подпунктами:

ol {
	counter-reset: list1;

	li:before {
		counter-increment: list1;
		content: counter(list1) '. ';
	}

	ol {
		counter-reset: list2;

		li:before {
			counter-increment: list2;
			content: counter(list1) '.' counter(list2) '. ';
		}

		ol {
			counter-reset: list3;

			li:before {
				counter-increment: list3;
				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
			}
		}
	}
}

update дополнительно стили для печати

P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.

Comments

[Матвей Мамонов]

Черт, да это гениально!

Казалось бы, что еще про этот CSS знать можно, а не тут-то было! Спасибо большое.

Правда, осталась непонятна строчка width: auto/9;. Буду рад объяснению.

[Сергей Некрасов]

Эта строчка для ie8

[Влад Бонем]

Сергей Некрасов: Спасибо)

[al3ch5]

за такую инфу, нежалко и расцеловать как Брежнев...

[Kadzi]

Есть что добавить к этому списку в 2020? (-:

Answer 2

[Boshnik]

normalize.css
+
/* Mobile Screen Resizing */

@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}
@-moz-viewport {
  width: device-width;
  zoom: 1.0;
}
@-ms-viewport {
  width: device-width;
  zoom: 1.0;
}
@-o-viewport {
  width: device-width;
  zoom: 1.0;
}
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Выравнивание по центру */

.absolute.center,
.fixed.center {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.center, .right.left{ 
  margin:auto 
}
.top    { top:0  }
.right  { right: 0 }
.bottom { bottom: 0 }
.left   { left: 0 }

/* btn disabled */

.btn-disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  background: #ccc !important;
}
.btn-disabled:hover {
  -webkit-box-shadow:none !important;
          box-shadow:none !important;
  background: #ccc !important;
}

/* img gray*/

.img-gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.img-color:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
  filter: none; /* IE 6-9 */
}

/* background */

.parallax {
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
}
.bg-cover {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

P.S. background-image задаю в инлайн стилях, удобно при работе с CMS MODX

Answer 3

[Михаил]

Начал бы с того, что подобные сниппеты идеально хранить, шарить и даже командно работать в Gist (от GitHub), у Gist, кстати есть приложение на Хром (работает и оффлайново, что плюс), он легко встраивается в Sublime, и даже есть в Web Storm. Воркфло изрядно ускоряется с этим.

подсветка полей... в приведенных примерах для полноты не хватает select, кто-то забывает button)) Главное, что бы при переписывании нативного outline для :focus, для него находилась замена. Прежде всего потому что будет страдать accessibility.

более полный перенос слов:

@mixin word-wrap() {
      -ms-word-break: break-all;
      word-break: break-all;
      word-break:     break-word;
      -webkit-hyphens: auto;
      -moz-hyphens:    auto;
      hyphens:         auto;
}

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

<html lang="ru"></html>

Добавить язык.

Или наоборот в случае когда на необходима только одна строчка текста:

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Вообще типографику люблю, поэтому есть и такое еще:

.like-inline:after {
	content: '\A';
	white-space: pre;
}

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

dl
     dt Артикул
     dd 1729110 
     dt Рост
     dd 164

Или нужно ряд ссылок оформить как список.

Класс для инлайн-блоков (что-то их недоиспользуют, а они намного круче float):

.ib {
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline;
}

Answer 4

[Назар Мокринский]

Clearfix не использую ибо flexbox и все дела

Comments

[Serj-One]

"flexbox и все дела" - это, конечно, здорово, но в ТЗ ~60% моих заказов есть требование ie 8+, так что это отпадает. Кроме того, суть вопроса в приведении своих примеров, а не комментировании моих, которые приведены только для упрощения понимания вопроса.

[lnked]

Serj-One: Аналогичено, ie 8 - 9 пока еще котируется, а флекс с 10 только поддерживается

[elsa-frozen]

Serj-One: вешаешь плашку "ваш браузер не поддерживается" и дело в шляпе. (юмор)

Answer 5

[lnked]

Практически все то же что и у вас (только футер прижимаю немного по другому) +

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

button {
	cursor: pointer;
}

input, textarea, button {
	outline: none;
}
input, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.inner {
	width: 100%;
	display: table;
}
.inner:after {
	width: 100%;
	clear: both;
	display: block;
	content: ' ';
}
* html .inner {
	margin-left: -3px;
}

::-webkit-input-placeholder { color: #000000; opacity: .45; }
:-moz-placeholder { color: #000000; opacity: .45; }
::-moz-placeholder { color: #000000; opacity: .45; }
:-ms-input-placeholder { color: #000000; opacity: .45; }

.disable-hover {
	pointer-events: none;
}

Answer 6

[Сергей Рогожкин]

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

*{
    -webkit-tap-highlight-color:transparent;
}

Comments

[Павел]

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

Answer 7

[Александр Решетняк]

футер прибивать уже лучше так https://codepen.io/axelaredz/pen/zeKdWx

Answer 8

[nurise]

+ normalize.css

body { cursor: default; }
* { outline: 0; }
* { transform: translate3d(0, 0, 0); }
html { font-size: 62.5%; }

Comments

[Роман]

а в чем сакральній смысл именно такого задания размера шрифта? а не просто 10 пиксель?

[chigoe]

Роман: Это удобно при использовании em\rem. Тогда, например, 1.4rem=14px, 2rem=20px и т.д.

[Роман]

chigoe: Ну это понятно. Мне просто интересно было есть ли какая-нибудь разница между font-size: 62.5% и font-size: 10px или это дело привычки

[Михаил]

* { outline: 0; } вот этого не понял, мало того что универсальный селектор.
вообще-то нативная эта обводка — элементарный элемент accessibility.

[nurise]

Михаил Гожий: дело вкуса

[Михаил]

не всякая вкусовщина есть вкус.
а html { font-size: 62.5%; } вот это, вообще антипаттерн

[Михаил]

nurise: outlinenone.com

Answer 9

[Илья Уткаев]

Для инлайновых ссылок в меню, новостных или ссылочных блоках, которые бывают больше одной строки, использую padding-top: .3em; — избавляет от мелькания курсора мыши между строк.

Answer 10

[Сергей Некрасов]

Вертикальное выравнивание по середине для inline-block

.vertical-middle {
    white-space: nowrap;
    > *{
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    &:after{
        content: '';
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
}

Расположение блоков по всей ширине родителя, тоже для inline-block

.justi {
    text-align: justify;
    display: block;
    &:after {
        content:'';
        display: inline-block;
        width: 100%;
        height: 0;
        visibility: hidden;
    }
}

Comments

[Boshnik]

Печать с поддержкой браузеров((
Я видел, что то похожее в нете.

.dinamic-menu {
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Включаем в работу последнюю строку*/
text-align-last: justify;
}
.dinamic-menu:after {
width: 100%;
height: 0;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
.dinamic-menu li {
display: inline-block;
text-align: center;
/* Восстанавливаем у потомков, кроме последнего*/
line-height: normal;
font-size: 1rem;
/* Без него в Opera будет отступ под элементами */
vertical-align: top;
}