Базовые CSS-стили различных элементов

[CyberAP]

div[class*="embossed"]
Не учите такому никого.

[rodweb]

div[class^="embossed"]
Потому что важно выделить элементы, у которых им класса начинается с «embossed».

[CyberAP]

Я прекрасно понимаю что это означает, только вот чем плох вариант всем элементам добавить класс .embossed? Ни дай бог такое кто-то себе скопирует и привыкнет использовать.

[kolyuchii]

Пруфлинк на рефлоуметр в студию.

[kolyuchii]

Я тоже мерил: marow.net/archives/95

В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!

[kolyuchii]

Сомнения — не аргумент.

[kolyuchii]

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

[kolyuchii]

Какие? Какие аргументы? Ссылка на блог яндекса? Там и упоминаний то нет касательно темы нашего спора.

Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.

[kolyuchii]

Экономите время — не пишите комментарии. Тем более, если не разбираетесь в предмете.

[kolyuchii]

Селектор класса: test.marow.net/testselectors/class.html?reflow-meter
Селектор атрибута: test.marow.net/testselectors/attr.html?reflow-meter

По 5000 элементов.

[dbelka]

То, что описано по вашей ссылке marow.net/archives/95 и запись div[class*=«embossed»] — это совершенно разные вещи. В вашей статье всё написано верно, но это никак не относится к данному селектору.

ИМХО этот селектор работает медленно, потому что по нему невозможно построить индекс. Этот запрос аналогичен запросу в MySQL LIKE '%embossed%'. Хотя я свято верю, что по классам индекс построен.

Простой спид-тест: выборка 1000*N раз сделать селектор div[class*=«embossed»] и div.embossed мне показывал разницу в три раза на небольшом DOM-дереве.

Для однократной отрисовки страницы это не страшно.
Однако если ваше js — приложение использует такие же селекторы — это уже может сказаться.

Вот.

[eashla]

Кратко, ясно, понятно.

[LeeMiller]

Пункт «Красивые кнопочки» с текстом

И стилями

• CSS с тенями,
• CSS с третьим эффектом

Как-то немного диссонируют, поскольку Embossed это стиль визуализации, а Тени это стиль технической реализации.

[Goobs]

А как насчет кликабельности элементов под этой тенью?

[coldman]

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

.layout {
 position: relative;
 z-index: -1;
 }

В хроме работает, возможно только в нем

[imater]

Было бы хорошо иметь еще ссылок на подобные кирпичики для проектов.

[Aledensoft]

Only Line Input порадовал — изящно.

[Mirza]

codrops, неужели это требует перевода (

[dasty]

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

[Serator]

+, если уж на то пошло, то в CSS3 есть "text-decoration-style". Да и в других примерах код криво написан. К примеру, «Metro Styles». Там при клике (селектор ".metro.three-d:active") свойство «box-shadow» обретает знаечение «none», но при этом остальные свойства анимируются. В итоге получается некрасиво. В html5 приняли "#top" прописывать ссылки тем элементам, что должны вести вверх страницы, в примере же просто "#", да и то, зачем она там? Кликнул и отправился куда-то при том, что просто хотел эффект при клике глянуть… В общем, вроде как и статья начального уровня, так и примеры из той же серии… Чему люди-то после сего научатся?..

[de_arnst]

Статья хорошая, спасибо, но все-таки выскажусь. Я видел большое количество сайтов с качественными примерами, и все они говорили, что облегчают мой труд как верстальщика, но написать что-то используя css3 я могу и сам, от таких сайтов, обычно, я жду готовый реализаций для браузеров >IE7, так как именно на это я трачу огромное количество своего времени, именно этот код я не хочу писать ручками, а хочу скопировать.

Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.

Соглашусь с выше сказанным и повторю забудьте:
div[class*="embossed"]

[de_arnst]

Видел, конечно же.

Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?

[de_arnst]

Ребята не парятся, но это ребята.

Реалии таковы, что производительность влияет на показатель отказов.

[kolyuchii]

Вы можете подтвердить своё высказывание о производительности?

[de_arnst]

Вам выше дали ссылку на Яндекс.

В каком виде вы хотите увидеть результаты?

[kolyuchii]

Да простенько прям. Две странички. С указанным селектором и по классу. Элементов примерно 5000 — 10 000, что бы хоть какую-то разницу видеть. И время отрисовки страницы.

[kolyuchii]

Вы осознаёте что такое 10 000 элементов или хотя бы 5000? Это очень много. На странице обычно используется всего 2 — 3 кнопки. Скажем так, на фоне перегруженности разметки у большинства сайтов, селектор атрибутов — не самое узкое место. Однако этот приём задаёт некий неймспейс, провит которого очевиден и перевешивает все упомянутые ужасы.

[kolyuchii]

На этой странице 3000 ВСЕХ элементов. Ни я, ни автор не призывает к использованию селекторов этого типа повсеместно, но только в управляющих элементах где они крайне уместны.

[kolyuchii]

Что подразумевается под словом лень в данном контексте?

[kolyuchii]

Совершенно ничего. Просто это другой подход к работе.

[4ikist]

Bootstrap — комплексное решение.

[zim32]

Ну все. Теперь синий квадрат с текстом — это ссылка в метро стиле.

[tushev]

Хотелось бы увидеть рекомендации на какие нибудь хорошие инструменты для удобной визуальной подготовки таких стилей.
Наверняка есть какие то простые он-лайн инструменты.
А то, когда создаешь подобные CSS-ки вручную, часто забываешь какие-нибудь тонкости, которые потом вылезают боком.

[Glook]

Современные тенденции настораживают.

Сверстать блок шириной 50% с закруглёнными углами в 10 пикселей радиусом, белым цветом текста, красным фоном, синей рамкой в 20 пикселей:
<div class="width-50-percent round-corners corners-10 text-color-white background-color-red border-width-20 border-color-special">

Мне одному кажется, что здесь что-то не так? Помню, ещё совсем недавно за такое могли и по морде…

[xargon]

конечно, не то что раньше

[kolyuchii]

Не нравится — не делайте.

[Dmitry_f]

Кнопки классные, остальное — трэш.

[CodeByZen]

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

Если такое уже реализованно — сорри.

Если у кого-то возникнут мысли по реализации данного проекта — велком в личку, поддержу.