Как ускорить свою работу, сэкономить время и остаться в тренде?
Если вы разработчик, то важно всегда обращать внимание на способы сделать ваш рабочий процесс более эффективным. Один из способов сделать это - писать меньше CSS, сделать его более кратким. При этом вы сможете быстрее завершить свои проекты, приступить к новым, сэкономить время и силы. Вы также уменьшите время редактирования и сделаете будущие изменения более управляемыми и четкими.
Одним из способов ускорить разработку станет использование инструментов, которые упрощают кодирование. Сюда входят текстовые редакторы, препроцессоры и плагины, такие как Emmet, которые помогают улучшить рабочий процесс.
Большинство этих советов невероятно просты в реализации и мгновенно ускоряют вашу разработку CSS.
Используйте препроцессор CSS, такой как Sass
Подробная информация: Sass
Препроцессор, такой как Sass, позволяет использовать функции, недоступные в настоящее время в CSS. Сюда входят переменные, вложенность, mixins и наследование. Используя эти функции с Sass, можно получить тот же результат, что и традиционный CSS, но с гораздо меньшим количеством кода, который нужно записать. Это означает, что вы можете написать что-то вроде этого, например:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorЧто же тут написано, шрифт и основной цвет определяются один раз в верхней части вашего файла CSS. Оттуда это значение можно вытащить, просто набрав $font-stack или $primary-color. Он сохраняет значения ввода снова и снова, а также позволяет обновлять все экземпляры только путем редактирования исходной переменной.
Это результат, который будет сгенерирован из этого примера кода Sass:
body
{
font: 100% Helvetica, sans-serif;
color: #333;
}Использовать сокращение CSS
Сокращение означает использование упрощенных и более коротких способов создания одного и того же CSS. Наиболее распространенным примером является способ, с помощью которого margin и padding можно упростить:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 10px;Превращается в:
margin: 10px 5px 15px 10px;Большинство разработчиков используют данное сокращение, тем не менее, есть несколько примеров, которые менее известны и могут ускорить разработку. К ним относятся:
1. Шрифты
font-style: italic;
font-weight: bold;
font-size: .5em;
line-height: 2;
font-family: Arial, sans-serif;... которые могут быть сокращены до:
font: italic bold .5em / 2 Arial, sans-serif;2. Контуры
outline-width: 1px;
outline-style: solid;
outline-color: #111;... которые могут быть сокращены до:
outline: 1px solid #111;3. Transition
transition-property: opacity;
transition-duration: 3s;
transition-delay: 1s;
transition-timing-function: ease-in;... которые могут быть сокращены до:
transition: opacity 3s ease-in 1s;Используйте фреймворк, такой как Bootstrap для более сложных проектов
Использование фреймворка не всегда подходит, например, для небольших и простых веб-сайтов. Для веб-сайтов среднего и крупного масштаба такая структура, как Bootstrap, может обеспечить большую ценность с точки зрения ускорения разработки CSS.
Bootstrap интегрируется с Sass и имеет гибкую сетку. Это означает, что вы можете обойти большую часть повторяющегося CSS, требуемого при создании с нуля. Он также содержит библиотеку готовых компонентов. Макеты и отдельные компоненты, такие как разделы навигации и контента, сразу готовы к работе.
Использовать CSS reset
Сброс CSS уменьшает несогласованности браузера для margin, font-size, line-height. Использование сброса позволяет заранее решить эту проблему, а не постоянно добавлять исправления в таблицу стилей. С помощью сброса, такого как этот Эрика Мейера, сможете обойтись небольшим числом строк CSS. Применение исправлений к отдельным тегам займет больше времени и расширит длину вашей таблицы стилей.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Используйте текстовый редактор с подсветкой синтаксиса
Использование текстового редактора, такого как Sublime Text, позволяет использовать несколько аккуратных ярлыков и функций для улучшения рабочего процесса с помощью CSS.
Подробная информация: CSS-трюки
Вы можете использовать функцию множественных выборов для одновременного изменения нескольких строк или переменных. Режим Split Editing позволяет редактировать CSS, а также просматривать HTML или JavaScript. Но одна из самых полезных функций - синтаксическая подсветка. Она группирует общие теги, операторы и т. Д., А цвет кодирует их, чтобы упростить поиск определенных моментов в вашем CSS.
Использовать плагин текстового редактора Emmet
Подробная информация: Love CSS
Emmet - это плагин для популярных текстовых редакторов, таких как Sublime Text, Atom и Coda. Он также поддерживается в JSFiddle и CodePen. Это позволяет использовать сверхбыстрое кодирование CSS с использованием сокращенного синтаксиса и динамических фрагментов. Чтобы показать, насколько это может ускорить кодирование, см. Следующий пример:
#page>div.logo+ul#navigation>li*5>a{Item $}Этот фрагмент кода написан для создания header веб-страницы, включая логотип и навигацию. Используя Emmet, одним щелчком мыши он трансформируется в это:
<div id="page">
<div class="logo"/></div/>
<ul id="navigation"/>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>Тот же эффект можно использовать в CSS. Просмотрите приведенные ниже аббревиатуры, чтобы понять простоту и краткость, которые она привносит в ваш код.
- # 1 → # 111111
- w100p → ширина: 100%;
- fw400 → font-weight: 400;
- m10 → margin: 10px;
Это всего лишь несколько способов ускорить разработку CSS. С появлением препроцессоров и фреймворков, CSS-кодирование постоянно совершенствуется и совершенствуется. Это экономит разработчикам все больше и больше времени, позволяя им выпускать веб-сайты и продукты за более короткий период времени.
