Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 54
Хабр! Даешь раздел со сниппетами! в компанию к Q&A
А еще с подборками :)
Вполне можно использовать github:gist. У каждого свои сниппеты, и как-то из кучи искать нужное — это странно. Допустим многие используют normalize.css вместо «ластика».
Все конечно замечательно, но есть несколько НО:
1. html { height: 101%; } /* always display scrollbars */ — не всегда полезно, и нужно…
2. "Классы для упрощения верстки" — такие классы лучше использовать совместно с LESS.js, т.к. не вижу смысла делать верстку с
.float-left /* Or whatever name you like */ {
float: left;
}
Тоже самое относится и к "Сниппеты дизайна"
3. "CSS3 градиенты" — если уж пишите про градиенты, то лучше дать ссылки на популярные генераторы градиентов, нежели каждый раз ручками править данный код, либо на пример использования этого кода в LESS.js
И вообще у Вас четко виден LESS.js на картинки в начале топика, но внутри ничего про него нет…
1. html { height: 101%; } /* always display scrollbars */ — не всегда полезно, и нужно…
2. "Классы для упрощения верстки" — такие классы лучше использовать совместно с LESS.js, т.к. не вижу смысла делать верстку с
.float-left /* Or whatever name you like */ {
float: left;
}
<ul>
<li class="float-left"></li>
<li class="float-left"></li>
<li class="float-left"></li>
</ul>Тоже самое относится и к "Сниппеты дизайна"
3. "CSS3 градиенты" — если уж пишите про градиенты, то лучше дать ссылки на популярные генераторы градиентов, нежели каждый раз ручками править данный код, либо на пример использования этого кода в LESS.js
И вообще у Вас четко виден LESS.js на картинки в начале топика, но внутри ничего про него нет…
может я чего-то не понимаю, но почему для сброса стилей не использовать специально обученный универсальный селектор? Зачем всё-то перечислять?
Вы про *?
И у меня возник тот же вопрос.
И да речь идет о звездочке *, почему не использовать вместо простыни перечисления?
И да речь идет о звездочке *, почему не использовать вместо простыни перечисления?
А такой уже существует? ибо насколько мне известно, все используют несколько наборов CSS Reset, они в принципе идентичны, и выполняют свою роль. А именно:
Самый популярный это Eric Meyer's CSS reset,, есть так же YUI CSS Reset, и множество идентичных вариаций
Так же существует Normalize.css — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles.
apply standard rules to elements, and eliminate cross-browser inconsistencies.
Самый популярный это Eric Meyer's CSS reset,, есть так же YUI CSS Reset, и множество идентичных вариаций
Так же существует Normalize.css — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles.
потому что есть элементы которые обнулять не надо. Например button.
Хм, почему? Я просто всегда считал, что надеяться на выставленные значения отступов для каких-либо элементов не стоит. Поэтому всегда сбрасываю всё и выставляю то, что мне нужно. Может, я отстал от жизни, но я не понимаю, чем плох такой подход? Вроде абсолютно универсален… Ткните может носом в статью, где расписано зачем городить огород из перечисления всех тегов.
Как минимум селектор "*" дико медленный, так как заставляет проверять ВСЕ элементы DOM дерева. С другой стороны у вас есть куча элементов для которых отступы не заданы (span, a, div, section, article, aside....).
Я последние года два вообще не использую ресеты, только нормализаторы.
Я последние года два вообще не использую ресеты, только нормализаторы.
Вот это уже аргумент, да. Хотя интересно было бы посмотреть сравнения между использованием * для ненаследуемых + задание наследуемых свойств через body и собственно разными ресетерами, обеспечивающими тот же функционал. Я пока нашёл только сравнение по скорости с * и без *, но и без доп. стилей.
На статике это особо значения не имеет, но если у вас динамическая система, в которой относительно часто идет вставка элементов в DOM, то тут уже можно и поэкономить.
А вообще профайлером легко можно оценить скорость работы различных селекторов. У меня при тестах звездочка отрабатывала раза в 4 медленнее все остальных селекторов.
А вообще профайлером легко можно оценить скорость работы различных селекторов. У меня при тестах звездочка отрабатывала раза в 4 медленнее все остальных селекторов.
В вебе сейчас есть множество на порядок более медленных вещей, чем этот несчастный селектор.
Узким местом он точно не является.
Узким местом он точно не является.
Помимо того, что " * " обнуляет стили с тегов, которые не нужно обнулять, вы еще потом эти стили возвращаете, делая двойную работу и для себя и для браузера.
Как я понимаю, вы обнуляете через " * " отступы? Но ведь есть и другие вещи, которые было бы полезнно обнулить, или привести к единому, кросс-браузерному виду.
Я считаю, что самое лучшее решение, это комбинированный подход normalize + reset.css + собственный опыт. Ресет нужно делать под себя, и свой стиль написания кода.
Как я понимаю, вы обнуляете через " * " отступы? Но ведь есть и другие вещи, которые было бы полезнно обнулить, или привести к единому, кросс-браузерному виду.
Я считаю, что самое лучшее решение, это комбинированный подход normalize + reset.css + собственный опыт. Ресет нужно делать под себя, и свой стиль написания кода.
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}как-то эта штука не особо торопится скрывать элементы
Вот за подобные комментарии я и сохраняю статьи в избранное :)
Указание type=«text/css» для link является обязательным для html 4.01 strict (хотя в html5 уже можно не указывать).
Ну это так, к слову.
Ну это так, к слову.
Ну хоть один расписал ад этой «несомненно полезной» статьи.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Это, видимо отсюда paulirish.com/2012/box-sizing-border-box-ftw/
Смысл в этом есть, но к этому нужно привыкнуть, так же, как привыкали когда-то при переходе с таблиц на дивы. А * да- влияет на производительность.
Спасибо. Вы спасли меня от глупостей.
Уважаемый grokru, пожалуйста прекратите заниматься тупой копипастой, не приводя испольуемый вами материал к актуальному состоянию с точки зрения современных техник и тенденций. И если уж занимаетесь переводами, то используйте хотя бы в качестве первоисточников издания, заслуживающие доверия (к css-tricks претензий нет, а вот другие два источника вызывают большие сомнения).
Бóльшая часть описанных здесь проблем уже решена в HTML5 Boilerplate, причём без костылей. Так и проще, и надёжнее, чем каждый раз собирать сниппеты.
Для классов .hide и .show лучше использовать visibility:hidden; и visibility: visible; соответственно, т.к. display: block; не только влияет на видимость, а и указывает, что элемент является блочным.
А visibility: hidden оставляет блок в общем потоке.
Для этих случаев можно просто переопределить стили. Например
a.show { display:inline; } и т.д. Тут все зависит от задачи.
a.show { display:inline; } и т.д. Тут все зависит от задачи.
Правильно display: auto;
Таким образом мы определим правильное значение по умолчанию для каждого типа элемента
Таким образом мы определим правильное значение по умолчанию для каждого типа элемента
Нет такого свойства как display: auto;
Я ошибся. Можно только с JS-фреймворками.
Например для jQuery:
сбросит на значение по умолчанию для этого элемента.
Источник: stackoverflow.com/questions/6556994/css-display-auto/6557005#6557005
Например для jQuery:
$('#element').css('display','');
сбросит на значение по умолчанию для этого элемента.
Источник: stackoverflow.com/questions/6556994/css-display-auto/6557005#6557005
Называть классы .hide и .show — неверно, т.к. это глаголы. Глаголы используются для обозначения действий, а не состояний (например, в именах JS-функций).
А имя класса должно быть существительным, прилагательным или причастием. В данном случае .hidden
А имя класса должно быть существительным, прилагательным или причастием. В данном случае .hidden
На картинке изображён LESS, в заголовке говорится про CSS, а статья просто предлагает HTML-сниппеты.
Вот — настоящие сниппеты для LESS:
http://lesselements.com/
Удобно и не усложняет код. Оригинальный проект уже год не обновлялся, но форков достаточно для выбора. У меня самого есть один со множеством новых фич и упрощений.
Вот — настоящие сниппеты для LESS:
http://lesselements.com/
Удобно и не усложняет код. Оригинальный проект уже год не обновлялся, но форков достаточно для выбора. У меня самого есть один со множеством новых фич и упрощений.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Базовые стили и полезные CSS-сниппеты