Начал бы с того, что подобные
сниппеты идеально хранить, шарить и даже командно работать в
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;
}
