Pull to refresh

Comments 54

Вполне можно использовать github:gist. У каждого свои сниппеты, и как-то из кучи искать нужное — это странно. Допустим многие используют normalize.css вместо «ластика».
Все конечно замечательно, но есть несколько НО:
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 на картинки в начале топика, но внутри ничего про него нет…
может я чего-то не понимаю, но почему для сброса стилей не использовать специально обученный универсальный селектор? Зачем всё-то перечислять?
И у меня возник тот же вопрос.
И да речь идет о звездочке *, почему не использовать вместо простыни перечисления?
Ну, вот тут говорят о производительности. В общем-то о ней и я в первую очередь задумался. Но сейчас уже не уверен что быстрее. Опять таки зависит, наверное. и от количества перечислений. В общем, интересно было бы взглянуть на тесты.
По-хорошему нужно сброс стилей для каждого элемента писать отдельным правилом. Это помогает избежать длинную портянку мусорных стилей в файербаге и вебинспекторе. Собственно так организован normalize.css.
А такой уже существует? ибо насколько мне известно, все используют несколько наборов CSS Reset, они в принципе идентичны, и выполняют свою роль. А именно:
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 медленнее все остальных селекторов.
В вебе сейчас есть множество на порядок более медленных вещей, чем этот несчастный селектор.
Узким местом он точно не является.
Если у вас есть потребность довольно часто что-то вставлять в DOM, то ситуация может измениться. И все опять же зависит от задачи. Но бездумно лепить этот селектор мне кажется тоже не лучшая затея.
Помимо того, что " * " обнуляет стили с тегов, которые не нужно обнулять, вы еще потом эти стили возвращаете, делая двойную работу и для себя и для браузера.

Как я понимаю, вы обнуляете через " * " отступы? Но ведь есть и другие вещи, которые было бы полезнно обнулить, или привести к единому, кросс-браузерному виду.

Я считаю, что самое лучшее решение, это комбинированный подход normalize + reset.css + собственный опыт. Ресет нужно делать под себя, и свой стиль написания кода.
.ir { text-indent: 100%; white-space: nowrap; overflow: hidden; }
как-то эта штука не особо торопится скрывать элементы
Она не должна скрывать элемент — это текст скрывается в блоке, а точнее уезжает за его пределы на 100%
Я-то понимаю. Это было в статье, но сейчас убрали уже оттуда. Было написано что этот кусок CSS можно юзать вместо position:absolute;left:-9999px; для скрытия элемента. Вот я и интересуюсь
Уахахаха автор удалил быстренько эту, мягко говоря, "глупость".
UFO landed and left these words here
Вот за подобные комментарии я и сохраняю статьи в избранное :)
Пора делать возможность добавлять комментарии в избранное, а то автор может подумать что его работу ценят, и будет продолжать плодить кака-посты.
UFO landed and left these words here
Да вроде давно уже можно.
Upd: все не могу привыкнуть обновлять комменты перед постом
Да, не часто я тут бывают, не заметил даже :) странно что автор комментария всё же предпочитает закидывать статью в избранное, нежели отдельные, интересные комментарии.
Указание type=«text/css» для link является обязательным для html 4.01 strict (хотя в html5 уже можно не указывать).
Ну это так, к слову.
UFO landed and left these words here
UFO landed and left these words here
Ну хоть один расписал ад этой «несомненно полезной» статьи.
*, *: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; элемент не отображается, но продолжает занимать пространство.
UFO landed and left these words here
Для этих случаев можно просто переопределить стили. Например
a.show { display:inline; } и т.д. Тут все зависит от задачи.
Правильно display: auto;

Таким образом мы определим правильное значение по умолчанию для каждого типа элемента
В таком случае лучше уж просто удалять класс hide
Так-то да. Я показал именно как можно «обнулить свойство» display
UFO landed and left these words here
UFO landed and left these words here
Называть классы .hide и .show — неверно, т.к. это глаголы. Глаголы используются для обозначения действий, а не состояний (например, в именах JS-функций).
А имя класса должно быть существительным, прилагательным или причастием. В данном случае .hidden
UFO landed and left these words here
display: absolute;
Вы ничего не перепутали?
Всегда было так:
position: absolute;
display: none;
UFO landed and left these words here
На картинке изображён LESS, в заголовке говорится про CSS, а статья просто предлагает HTML-сниппеты.

Вот — настоящие сниппеты для LESS:

http://lesselements.com/

Удобно и не усложняет код. Оригинальный проект уже год не обновлялся, но форков достаточно для выбора. У меня самого есть один со множеством новых фич и упрощений.
Only those users with full accounts are able to leave comments. Log in, please.