7 CSS грешки, които трябва да избягвате като начинаещи

7 CSS грешки, които трябва да избягвате като начинаещи

Работата с каскадни стилови таблици (CSS) може да бъде трудна за начинаещи. Използвайки CSS, можете да структурирате, актуализирате и поддържате външния вид на вашето приложение. Но езикът изисква умения за манипулиране на HTML страници, за да получите желаното оформление.

Ето някои грешки, които трябва да избягвате, когато работите с CSS. Те ще ви спестят време и ще улеснят процеса на разработка.

1. Използване на px за размер на шрифта

Единицата „px“ представлява пиксели. Можете да го използвате, за да изразите различни дължини на уеб страница, от ширината и височината на елемент до неговия размер на шрифта.

px обаче заключва вашия дизайн до фиксиран размер за всички екрани. Изображение в px може да заеме цялата ширина на един екран и само малка част от друг. Ако искате по-пропорционален елемент, използвайте относителни измервания като rem или проценти (%).

Най-доброто относително измерване за използване е rem. Тази единица се отнася до размера на шрифта на основния елемент, който читателят често може да зададе в настройките на своя браузър. Можете да видите въздействието на px и rem върху елемент в следния пример:

<!DOCTYPE html>
<HTML>
    <head></head>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

Можете да стилизирате размерите на шрифта в този документ, като използвате px единици със следния CSS:

h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}


p {
    font-size: 15px;
}

Получената страница изглежда приемливо, когато я гледате на голям екран:

PX въздействие върху абзаца

Но не изглежда представително на по-малък екран, като на телефон:

px ефект на малък екран

След това приложете re върху същото съдържание. Посочете основен размер на шрифта на html елемента и оразмерете другите елементи с помощта на rems, както е илюстрирано по-долу:

html {
    font-size: 16px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

Забележете разликата между големия и малкия екран. С rem съдържанието се мащабира по-добре независимо от размера на екрана. Елементите никога няма да надвишат зададения размер на екрана. Ето защо е по-добре да използвате относителни дължини, а не пиксели.

На настолен екран:

ефект на rem върху текст на голям екран

На малък екран текстът в мерни единици все още може да се чете:

ефект на rem на малък екран

2. Поставяне на всички ваши стилове в един файл

Използването на един CSS файл за голям проект може да създаде бъркотия. Ще имате файл с дълги редове код, който ще бъде объркващ при актуализиране. Опитайте да използвате различни файлове за CSS стилови таблици за различни компоненти.

Например, можете да имате различни файлове за навигация, горен и долен колонтитул. И още един за участъци по тялото. Разделянето на вашите CSS файлове помага за структурирането на вашето приложение и насърчава използваемостта на кода.

3. Неподходящо използване на вграден CSS

Във ванилия CSS можете да пишете стилове на HTML страниците точно както в CSS рамки като Bootstrap и TailwindCSS. Вграденият CSS ви позволява да приложите уникален стил към HTML елемент. Той използва атрибута style на HTML елемента.

Следният код е пример за вграден CSS.

<h2 style="color:green;">This is a Green Heading</h2>

<p style="color:red;">This is a red paragraph.</p>

Текстът ще изглежда така:

ефект на вграден css върху текст

Въпреки това, HTML само с вграден CSS може да бъде объркан. Тъй като няма друго място за CSS, целият CSS съществува в същия файл като HTML. Ще изглежда пренаселено. Редактирането на такъв файл е трудно, особено ако това не е вашият код.

Освен това с вградения CSS трябва да напишете код за всеки елемент. Това увеличава повторенията и намалява повторната употреба на код. Винаги използвайте комбинация от външни таблици със стилове и вграден CSS, за да стилизирате уеб страниците си.

4. Прекомерна употреба! важно

В CSS правилото !important добавя повече важност към свойство/стойност. Той отменя други правила за стилизиране за това свойство на този елемент.

Трябва да имате само няколко ! важни правила във вашия код. Използвайте го само когато е необходимо. Няма смисъл да пишете код и след това да го замествате. Вашият код ще изглежда объркан и ще създава проблеми, когато се изпълнява на някои устройства.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p> I am orange </p>
        <p class="my-class"> I am green </p>
        <p id="my-id"> I am blue. </p>
    </body>
</html>

CSS:

#my-id {
    background-color: blue;
}

.my-class {
    background-color: green;
}

p {
    background-color: orange! important;
}

Резултатът е така:

ефект на !important команда върху стила

5. Неспазване на конвенциите за именуване

CSS има конвенции за именуване, които насочват разработчиците как да пишат стандартен код. Това е от съществено значение, ако в крайна сметка отстраните грешки в CSS файла на бъдеща дата.

Един от тези стандарти включва използването на тирета за разделяне на групирани думи. Друг е именуване на селектор според това, което прави. Така че всеки, който го гледа, няма да се налага да гадае. Освен това улеснява четенето, поддържането и споделянето на код. Например:

Вместо това:

.image1 { margin-left: 3%; }

Напишете го така:

.boy-image { margin-left: 3%; }

Когато разглеждате таблицата със стилове, ще знаете точно за кое изображение е кодът. Ръководството за HTML/CSS стил на Google изброява много повече конвенции, които всеки разработчик трябва да знае.

6. Оставяне на кода без коментар

Писането на коментари е най-подценяваното умение в програмирането. Много хора забравят да пишат коментари, за да обяснят своя код. Но спестява време. Коментарите са от съществено значение за четенето и поддържането на кода.

Тъй като CSS е слабо структуриран и всеки може да разработи свои собствени конвенции, коментарите са жизненоважни. Използването на добре структурирани коментари за обяснение на вашия стилов лист е добра практика. Можете да пишете коментари, обясняващи секции от кода и какво правят.

/* video elements need space to breathe */
.video {
    margin-top: 2em;
}

/* styling the hero section */
.salutation {
    margin-top: 1em;
}

7. Липса на предварително проектиране

Много хора го правят, но е голяма грешка да започнете да кодирате без план. CSS определя как изглежда структурата на вашия преден край. Дизайнът говори много за вашите умения за програмиране.

дизайн на бележник

Дизайнът на вашия сайт изяснява вашата визия и необходимите ресурси, за да стигнете до там. Имайте умствена картина на вашия проект. След това го проектирайте на хартия или използвайте инструментариум за проектиране като Canva, за да визуализирате това, което искате.

Когато имате пълна картина на проекта, съберете всичките си ресурси и започнете да кодирате. Това ще ви спести време и излишък.

Защо трябва да вземете предвид тези препоръки

Ако разработвате приложения в мрежата, ще използвате CSS. Добрата работа с CSS изисква практика и следване на стандартните конвенции. Конвенциите не само правят вашия код четим, но и поддържаем.

Писането на стандартизиран код ще ви спести време и усилия. Времето, което бихте отделили за форматиране на предния край, можете да отделите за по-сложни функции. Освен това гарантира, че можете да използвате повторно кода и да го споделяте с други. Напишете по-добър код, като следвате зададените конвенции и станете по-добър разработчик.

12-те най-надеждни твърди диска

12-те най-надеждни твърди диска

Как да създадете плейлист на Spotify в бутилка, който да...

Как да създадете плейлист на Spotify в бутилка, който да...

Коригирайте кода за грешка на Microsoft Store 0x00000000 в Windows

Коригирайте кода за грешка на Microsoft Store 0x00000000 в Windows

Как да коригирате проблема с Malwarebytes „Runtime Error: Could Not...

Как да коригирате проблема с Malwarebytes „Runtime Error: Could Not...

Вашият коментар

Вашият имейл адрес няма да бъде публикуван.