Спазвайте най-добрите практики за CSS: Избягвайте вградени стилове на CSS

click fraud protection

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

CSS стиловете се разгръщат по два начина:

  • Вграден - в рамките на кодирането на самата уеб страница, индивидуално, елемент по елемент
  • В самостоятелен CSS документ, към който е свързан уебсайтът
Пример за CSS
CSS.Джеръми Жирард

Най-добри практики за CSS

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

Следването на най-добрите практики за CSS може да подобри вашия сайт по няколко начина:

instagram viewer
  • Разделя съдържанието от дизайна: Една от основните цели на CSS е да премахне дизайнерските елементи от HTML и да ги постави на друго място, за да ги поддържа дизайнерът. Тази практика също така служи за отделяне на дизайнерите от разработчиците, така че всеки да може да се съсредоточи върху своите области на опит. Дизайнерът не трябва да бъде разработчик, за да поддържа външния вид на уебсайта.
  • Улеснява поддръжката: Един от най-пренебрегваните елементи на уеб дизайна е поддръжката. За разлика от печатните материали, уебсайтът никога не е „готов и свършен“. Съдържанието, дизайнът и функциите могат и трябва да се развиват с течение на времето. Наличието на CSS на централно място, вместо да се разпръсква в целия уебсайт, прави нещата много по-лесни за поддържане.
  • Поддържа вашия сайт достъпен: Използването на CSS стилове помага на търсачките и хората с увреждания да взаимодействат с вашия сайт.
  • Поддържа сайта ви актуален по-дълго: Използвайки най-добрите практики с CSS, вие се придържате към стандарти, които са доказано стабилни, но достатъчно гъвкави, за да отговорят на промените в средата на уеб дизайна.

Вградените стилове не са най-добрата практика

Вградените стилове, макар че имат цел, обикновено не са най-добрият начин да поддържате уебсайта си. Те противоречат на всяка една от най-добрите практики:

  • Вградените стилове не разделят съдържанието от дизайна: Вградените стилове са точно същите като вградения шрифт и други неудобни дизайнерски маркери, срещу които съвременните разработчици се насочват. Стиловете засягат само конкретните, отделни елементи, към които са приложени; макар че този подход може да ви даде по-задълбочен контрол, той също така затруднява други аспекти на дизайна и развитието - като последователност.
  • Вградените стилове причиняват поддръжка на главоболие: Когато работите със таблици със стилове, да разберете къде се задава стил може да бъде трудно. Когато си имате работа със смес от вградени, вградени и външни стилове, имате много места за проверка. Ако работите в екип за уеб дизайн или трябва да преработите или поддържате сайт, създаден от някой друг, тогава ще имате още повече проблеми. След като намерите стила и го промените, ще трябва да го направите на всеки елемент на всяка страница, където е бил поставен. Това увеличава астрономически бюджета за време и работа.
  • Вградените стилове не са толкова достъпни: Докато съвременният екранен четец или друго помощно устройство може да е в състояние да обработва вградени атрибути и етикети ефективно, някои по-стари устройства не могат, което може да доведе до някаква странно показвана мрежа страници. Допълнителните знаци и текст също могат да повлияят на начина, по който страницата ви се вижда от робота на търсачката, така че страницата ви не се справя добре по отношение на оптимизацията на търсачката.
  • Вградените стилове правят страниците ви по-големи: Ако искате всеки абзац на вашия сайт да се показва по определен начин, можете да го направите веднъж с шест реда или така код във външна таблица със стилове. Ако го правите с вградени стилове обаче, трябва да добавите тези стилове към всеки абзац на вашия сайт. Ако имате пет реда CSS, това са пет реда, умножени по всеки абзац на вашия сайт. Тази честотна лента и времето за зареждане могат да се увеличат в бързаме.

Алтернативата на вградените стилове са външните таблици със стилове

Вместо да използвате вградени стилове, използвайте външни таблици със стилове. Те ви дават всички предимства на най-добрите практики за CSS и са лесни за използване. Използвани по този начин, всички стилове, използвани на вашия сайт, живеят в отделен документ, който след това е свързан с уеб документ с един ред код. Външни таблици със стилове засягат всеки документ, към който са прикачени. Ако имате уебсайт от 20 страници, в който всяка страница използва една и съща таблица със стилове - което обикновено е така готово - можете да направите промяна на всяка една от тези страници, просто като редактирате тези стилове веднъж, в една място. Промяната на стилове на едно място е по-удобна от търсенето на това кодиране на всяка страница на вашия уебсайт. Тази гъвкавост улеснява дългосрочното управление на сайта.

instagram story viewer