Інструмент Emmet
Для пришвидшення наробу коду існують різноманітні препроцесори, інструменти автодоповнення, підказок.
Одним із інструментів швидкого набору коду є Emmet.
В jsFiddle та PHPStorm плагін Emmet вже вбудований. У інші IDE його можна підключити, скачавши плагін.
З повною документацією можна ознайомитися на офіційному сайті.
HTML
Для використання Emmet вводьте скорочений код і нажимайте Tab.
Поексперементуйте:
pTab
divTab
aTab
imgTab
linkTab
!Tab
Якщо потрібно задати клас чи id - прописуйте їх через крапку чи ришітку:
p.title
div.big.red.bold
.news
div#news
div#news.news
#news.news
Кутова дужка > вказує на дочірній елемент. Символ плюса - на сусідній елемент:
div>p
div>p>strong>a>span
div>h2+p+p
ul>li+li+li+li
В останньому випадку li задавати не дуже зручно. Символ множення вказує на необхідність створити копії елементів:
ul>li*4
p.info*4>span
Текст вказується в фігурних дужках, можна використати символ долара як лічильник:
h2{Семантика HTML5}
p{Тест}*3
p>span{$}*4
ul>li{Item $}*5
Повернутися до батьківського елемента можна за допомогою символа карет (^):
p>span{привіт}+{ світ}^p>span{кагділа?}
ul>li*4>a{посилання}^^p{текст під меню}
Дужками можна виокремлювати блоки, порівняйте результат:
ul>li*4>a{посилання}^^p{текст під меню}
ul>(li*4>a{посилання})^^p{текст під меню}
Текст-рибу можна створити скороченням lorem, можна вказати кількість слів:
lorem
p>lorem
lorem5
lorem100
CSS
В CSS є великий набір скорочень для стилів, деякі з них:
c#f00 = color: #f00;
m20 = margin: 20px;
p8/16 = padding: 8px 16px;
fz18 = font-size: 18px;
З повним переліком скорочень можете ознайомитися в snippets.json.