CSS иштөөчәндігін оптималдаштырганда кандай…

Өтө татаал селекторлорду колдонуу: > * же :nth-child сыяктуу селекторлор браузер үчүн жай иштеши мүмкүн, элементтерди издөөдө.
@import колдонуу: @import кошумча HTTP суроолорун жаратат жана стилдердин параллел жүктөлүшүн токтотот, бул баракчаны чийүү ылдамдыгын төмөндөтөт.
Кыскача көрсөтүлгөн касиеттерди колдонбоо: Бир нече касиеттерди (мисалы, margin-top, margin-bottom жана башка) кыскача margin ордуна аныктоо файлдын өлчөмүн жана талдоо убактысын көбөйтүшү мүмкүн.
Көп !important эрежелери: !important колдонуу каскаддуулукка тоскоолдук кылат жана стилдерди түзөтүү жана колдоо кыйынчылыктарын жаратат.
Артыкча CSS колдонуу: Стилдер, алар баракчада эч кандай элементке колдонулбайт, файлдын өлчөмүн көбөйтөт.
Сүрөттөрдү оптималдаштырбоо: CSSте колдонулган сүрөттөр (мисалы, фон катары) кысылган жана туура форматта болушу керек.
Минификация жана кысуу жоктугу: CSS файлдары минималдаштырылган жана кысылган болушу керек (мисалы, Gzip), өлчөмүн азайтуу жана жүктөө ылдамдыгын жакшыртуу үчүн.
Көптөгөн CSS файлдары: Кичинекей CSS файлдардын көптүгү HTTP суроолорунун санын көбөйтөт.
Рендерингди блоктоо: CSS алдын ала ресурстардын бири болуп, рендерингди блоктойт. Туура эмес уюштуруу (мисалы, маанилүү стильдер башында) рендерингди кечиктириши мүмкүн.
Стандарттык эмес шрифттерди оптимизациясыз колдонуу: Көптөгөн шрифттерди колдонуу же оптимизациясыз (мисалы, поднаборлорсуз) сайттын жүктөлүшүн жайлатышы мүмкүн.
Глубок DOM дарактары: Кыйын жана терең DOM дарактары стильдердин колдонулушу жана кайра чийүү процессин жайлатышы мүмкүн.
CSS аркылуу анимациялар, көп жолу стилдерди жана макеттерди кайра эсептөө менен: left/top ордуна transform колдонуу браузердин иштешин жакшыртат.
Медиа суроо-талаптарды туура эмес колдонуу: Көп же оптимизацияланбаган медиа суроо-талаптар стильдердин иштетүү убактысын көбөйтүшү мүмкүн.
Өнүмдүүлүк анализинин жоктугу: Chrome DevTools Performance tab сыяктуу инструменттерди колдонбостон, көйгөйлөрдү аныктоо кыйын.

/* Натыйжасыз селектордун мисалы */
body > * {
    margin: 0;
}

/* Эффективдүү селектордун мисалы */
.container {
    margin: 0;
}

/* @import колдонбоңуз */
@import url('other.css');

/* HTMLде <link> колдонуу артык */

/* Анын ордуна */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* кыскача көрсөтүлгөн касиетти колдонуу */
margin: 10px 20px;

CSS иштөөчәндігін оптималдаштырганда кандай кыйынчылыктар чыгышы мүмкүн?