5 приемов работы с CSS, о которых вам следует знать

[Madeas]

Не плохо. Добавил в закладки, где-нибудь да пригодится.

[pepelsbey]

Я понимаю, что вы привыкли. Но если вы правда писали это для новичков, то почему бы не дать примеры на CSS, а не на Sass? Вы даже не упоминаете это нигде и случайному человеку это кажется нормальным. Он копирует код, сохраняет и ничего не работает.

[sfi0zy]

Вы даже не упоминаете это нигде

Во всех полных примерах с CodePen соответствующие вкладки недвусмысленно называются «LESS» и одним нажатием кнопки происходит переключение на скомпилированный CSS, если он нужен.

[dpigo]

На заборе тоже много чего написано. В статье у вас это нигде не упоминается, хотя все на sass написано. Сделайте хоть дисклеймер какой!

[namikiri]

Он нужен, потому что в заголовке статьи написано «CSS», а не «SASS».

[sfi0zy]

По минусам понимаю, что попал в новую аудиторию. На тостере «начинающие», которые задают такие вопросы, уже знают о препроцессорах и используют их. Тот факт, что кто-то использовал вложенность (только ее) в ответе, никого не смущает. Более ценен факт передачи идеи. По всей видимости у аудитории на хабре немного другие взгляды на этот вопрос с синтаксисом. Принял к сведению.

[dpigo]

У аудитории на Хабре больше любви к последовательности. Сказал CSS — пиши примеры на CSS. Сказал CSS, а пишешь на Sass — хотябы предупреди об этом. Кто-то может быть знаком с препроцессорами, кто-то нет, а статья пишется для максимально широкой аудитории.

[dpigo]

Занудство часто спасает от печальных последствий. И все же не все используют препроцессоры. Наоборот сейчас мода на них идёт на убыль с приходом кастомных свойств и предложением введения вложенности в самом CSS.

[dpigo]

Поддержка 86% (эдж с 16 версии, фф с 38, хром с 49, сафари с 9.1). Если вам не нужно поддерживать легаси в виде ие11 и андроида 4.4, можно вполне обойтись без постцсс. Опять же мы говорим про то, что нужно называть вещи своими именами, а не про то, что знает или не знает читатель.

[Shultc]

На Тостере люди читают ответы на интересующие их профессиональные вопросы.
На Хабре же, C# девелопер может прочитать вашу статью, чисто из интереса «Что-там новенького и интересного в веб-разработку завезли?». Как я и сделал.
А что есть этот «SASS» и препоцессоры от меня так же далеко, как для вас WPF-контролы. Но узнаю о том, что это не CSS, и что это вообще такое, я, почему-то, из комментариев.

Не надо так.

[Netron]

Спасибо!

[sw0rl0k]

Добавьте в закладки и проставьте кастомные теги. Я таким образом хабр в небольшой и неплохой справочник превратил.

[RikardoV]

Не проблема. Статья нужна для того чтобы показать что это можно делать при помощи простых средств. Она не предназначена для зазубривания))

[Nargus]

Примеры приведены в CodePen. Ставите сердечко там и сможете найти их в своей коллекции, когда понадобится.

[Vlad_IT]

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

[VRV]

блин сложно спроектировать и изначально заложить такое, а так дельное описание, спасибо

[CoolCmd]

такие статьи всегда полезны куче народа, и не только начинающим.

я только одного не понял: зачем во все примеры пихать исходники фона (svg) и какой-то левый шрифт? это только усложняет разбор стилей.

[megahertz]

да, было бы удобнее если бы декор располагался внизу css (все-таки пример, а не реальный проект)

[megahertz]

Очень порадовал 4й пример. При решении такой задачи прибегнул бы к canvas со всеми вытекающими, на css с минимальным js в голову бы не пришло.

[xState_level80]

Сам девелопер я не первый год, но до такого дойти ещё не смог. Вот и вопрос — кто есть про по css и сколько требуется времени чтобы им стать? А так спасибо за материал!