Хорошие и плохие CSS-практики для начинающих

Плохие CSS-практики

Много раз использовать одно и то же правило

#intro1 {color: blue; font-size: 10px; font-weight: bold;}

header {color: blue; font-size: 20px; background-color: green;}

#banner {color: blue; font-size: 30px; background-image: url(images/static.jpg);}
.blue {color: blue;}

Использовать одинаковый ID для нескольких элементов

<p id="big">This is a great heading.</p><p id="big">This is absolutely a greater heading.</p>
<p class="big">This is a great heading.</p><p class="big">This is absolutely a greater heading.</p>

Когда уместно правило !important

header { 
color: red;
}
header.intro {
color: blue !important;
font-size: 20px;
}
header#capture {
color: green;
font-size: 20px;
}

Использование неэффективных CSS-селекторов

#header #intro h1.big a { ... }#header #intro h1.big a.normal { ... }
.big a { ... }.big .normal { ... }

Использовать тонны веб-шрифтов

Использование встроенных (инлайн) стилей

Хорошие CSS-практики

Используйте в CSS структуру контента

/* Project Meta *//* reset  *//* general *//* typography *//* grid *//* header *//* footer *//* Page template A *//* Page template B *//* Media Queries */

Сделайте CSS “читабельным”

.box {background: green; border: 1px solid black;}
.box {
background: green;
border: 1px solid black;
}

Отделите стили jQuery-плагинов

Файл сброса стилей

CSS3 анимация в последнюю очередь

Комбинируйте элементы

h1, h2, h3 {
font-family: 'Lato', sans-serif;
color: #dadada;
}

Используйте краткие записи свойств

#div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 3px;
margint-left: 4px;
}
#div {
margin: 10px 10px 3px 4px; // top, right, bottom left
}

Всегда комментируйте

/* GENERAL RULE */html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
overflow: hidden;
}
h1 {
color: #3498db;
text-align: center;
font-size: 35px;
margin: 100px 0px;
font-weight: 700;
}

Вендорные префиксы

-webkit-transition: all 6s ease;-moz-transition: all 6s ease;-ms-transition: all 6s ease;-o-transition: all 6s ease;transition: all 6s ease;

Сжатие CSS

Чаще используйте HEX-цвета

Валидация

Что дальше?

--

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

More from Medium

Don’t want to mess around with custom CSS? Bootstrap has you covered.

Pure CSS animation #1: 3D cubes

How to Truncate Text using CSS

An example of truncated text. It shows “hello w…”.

Centering vertically and horizontally with CSS