Работата с каскадни стилови таблици (CSS) може да бъде трудна за начинаещи. Използвайки CSS, можете да структурирате, актуализирате и поддържате външния вид на вашето приложение. Но езикът изисква умения за манипулиране на HTML страници, за да получите желаното оформление.
Ето някои грешки, които трябва да избягвате, когато работите с CSS. Те ще ви спестят време и ще улеснят процеса на разработка.
1. Използване на px за размери на шрифта
Единицата "px" представлява пиксели. Можете да го използвате, за да изразите различни дължини на уеб страница, от ширината и височината на елемент до неговия размер на шрифта.
px обаче заключва вашия дизайн до фиксиран размер за всички екрани. Изображение в px може да заеме цялата ширина на един екран и само малка част от друг. Ако искате по-пропорционален елемент, използвайте относителни измервания като rem или проценти (%).
Най-доброто относително измерване за използване е rem. Тази единица се отнася до размера на шрифта на основния елемент, който читателят често може да зададе в настройките на своя браузър. Можете да видите въздействието на px и rem върху елемент в следния пример:
html>
<HTML>
<глава>глава>
<тяло>
<h1>Това е заглавие 1h1>
<h2>Това е заглавие 2h2>
<стр>Това е параграф.стр>
<стр>Това е друг параграф.стр>
тяло>
html>Можете да стилизирате размерите на шрифта в този документ, като използвате px единици със следния CSS:
h1 {
размер на шрифта: 50px;
}h2 {
размер на шрифта: 30px;
}
стр {
размер на шрифта: 15px;
}
Получената страница изглежда приемливо, когато я гледате на голям екран:
Но не изглежда представително на по-малък екран, като на телефон:
След това приложете re върху същото съдържание. Посочете основен размер на шрифта на html елемента и оразмерете другите елементи с помощта на rems, както е илюстрирано по-долу:
html {
размер на шрифта: 16px;
}h1 {
размер на шрифта: 3рем;
}h2 {
размер на шрифта: 2рем;
}
стр {
размер на шрифта: 1рем;
}
Забележете разликата между големия и малкия екран. С rem съдържанието се мащабира по-добре независимо от размера на екрана. Елементите никога няма да надвишат зададения размер на екрана. Ето защо е по-добре да използвате относителни дължини, а не пиксели.
На настолен екран:
На малък екран текстът в мерни единици все още може да се чете:
2. Поставяне на всички ваши стилове в един файл
Използването на един CSS файл за голям проект може да създаде бъркотия. Ще имате файл с дълги редове код, който ще бъде объркващ при актуализиране. Опитайте да използвате различни файлове за CSS стилови таблици за различни компоненти.
Например, можете да имате различни файлове за навигация, горен и долен колонтитул. И още един за участъци по тялото. Разделянето на вашите CSS файлове помага за структурирането на вашето приложение и насърчава използваемостта на кода.
3. Използване на вграден CSS неподходящо
В ванилия CSS можете да пишете стилове на HTML страниците точно както на CSS рамки като Bootstrap и TailwindCSS. Вграденият CSS ви позволява да приложите уникален стил към HTML елемент. Той използва атрибута style на HTML елемента.
Следният код е пример за вграден CSS.
<h2стил="цвят: зелен;">Това е Зелен курсh2>
<стрстил="цвят: червен;">Това е червен параграф.стр>
Текстът ще изглежда така:
Въпреки това, HTML само с вграден CSS може да бъде объркан. Тъй като няма друго място за CSS, целият CSS съществува в същия файл като HTML. Ще изглежда пренаселено. Редактирането на такъв файл е трудно, особено ако това не е вашият код.
Освен това с вградения CSS трябва да напишете код за всеки елемент. Това увеличава повторенията и намалява повторната употреба на код. Винаги използвайте комбинация от външни таблици със стилове и вграден CSS, за да стилизирате уеб страниците си.
4. Прекомерна употреба !важно
В CSS, !важно правило добавя по-голяма важност към свойство/стойност. Той отменя други правила за стилизиране за това свойство на този елемент.
Трябва да имате само няколко !важно правила във вашия код. Използвайте го само когато е необходимо. Няма смисъл да пишете код и след това да го замествате. Вашият код ще изглежда объркан и ще създава проблеми, когато се изпълнява на някои устройства.
html>
<html>
<глава>глава>
<тяло>
<стр> Аз съм оранжев стр>
<стрклас="Моят клас"> Аз съм зелен стр>
<стрдокумент за самоличност="my-id"> Аз съм син. стр>
тяло>
html>CSS:
#my-id {
Цвят на фона: син;
}.Моят клас {
Цвят на фона: зелено;
}
стр {
Цвят на фона: оранжево !важно;
}
Резултатът е така:
5. Неспазване на конвенциите за именуване
CSS има конвенции за именуване, които насочват разработчиците как да пишат стандартен код. Това е от съществено значение, ако свършите отстраняване на грешки в CSS файла на бъдеща дата.
Един от тези стандарти включва използването на тирета за разделяне на групирани думи. Друг е именуване на селектор според това, което прави. Така че всеки, който го гледа, няма да се налага да гадае. Освен това улеснява четенето, поддържането и споделянето на код. Например:
Вместо това:
.image1 { margin-left: 3%; }Напишете го така:
.момче-образ { margin-left: 3%; }Когато разглеждате таблицата със стилове, ще знаете точно за кое изображение е кодът. Ръководство за HTML/CSS стил на Google изброява още много конвенции, които всеки разработчик трябва да знае.
Писането на коментари е най-подценяваното умение в програмирането. Много хора забравят да пишат коментари, за да обяснят своя код. Но спестява време. Коментарите са от съществено значение за четенето и поддържането на кода.
Тъй като CSS е слабо структуриран и всеки може да разработи свои собствени конвенции, коментарите са жизненоважни. Използването на добре структурирани коментари за обяснение на вашия стилов лист е добра практика. Можете да пишете коментари, обясняващи секции от кода и какво правят.
/* видео елементите се нуждаят от пространство, за да дишат */
.видео {
margin-top: 2ем;
}
/* оформяне на секцията герой */
.поздрав {
margin-top: 1ем;
}
7. Неуспешно проектиране предварително
Много хора го правят, но е голяма грешка да започнете да кодирате без план. CSS определя как изглежда структурата на вашия преден край. Дизайнът говори много за вашите умения за програмиране.
Дизайнът на вашия сайт изяснява вашата визия и необходимите ресурси, за да стигнете до там. Имайте умствена картина на вашия проект. След това го проектирайте на хартия или използвайте инструментариум за дизайн като Canva да визуализирате това, което искате.
Когато имате пълна картина на проекта, съберете всичките си ресурси и започнете да кодирате. Това ще ви спести време и излишък.
Защо трябва да вземете предвид тези препоръки
Ако разработвате приложения в мрежата, ще използвате CSS. Добрата работа с CSS изисква практика и следване на стандартните конвенции. Конвенциите не само правят вашия код четим, но и поддържаем.
Писането на стандартизиран код ще ви спести време и усилия. Времето, което бихте отделили за форматиране на предния край, можете да отделите за по-сложни функции. Освен това гарантира, че можете да използвате повторно кода и да го споделяте с други. Напишете по-добър код, като следвате зададените конвенции и станете по-добър разработчик.