CSS съвети и трикове, част 1
Тъй като използвам CSS интензивно повече от 2 години, попаднах на няколко трика, които ми помагат да използвам CSS по-ефективно и да решавам конкретни проблеми. Бих искал да споделя някои от моите любими CSS трикове и да обясня някои от най-честите грешки, които правят новобранците. Ако имате опит с CSS, най-вероятно вече сте срещали тези съвети и трикове по пътя си, но кой знае, може би ще има няколко нови.
От самото начало беше планирано да напиша всичко в една статия, но имаше все повече и повече съвети и затова разделих всичко на две части за по-лесно асимилиране на този материал.
Съкратен CSS
За да спестите място и да направите вашите CSS файлове по-четими, препоръчвам да използвате съкратения синтаксис. Обхванах как да използвам стенограмата на CSS в моята статия Ефективен CSS с преки пътища, така че ви насочвам там, вместо да навлизам в подробности тук.
Ако стойността не е равна на 0, тогава винаги посочвайте мерната единица
Липсата на единица за стойността на дължината е доста често срещана грешка сред начинаещите в CSS. Възможно е да се избегне това в HTML, но в CSS всички стойности на дължината трябва да имат единица. Има две изключения: line-height и стойността 0 (нула). Имайте предвид, че стойността трябва да бъде последвана от мерна единица - няма нужда да вмъквате празно място (интервал) между тях.
Не е необходимо да се указва единица за 0 (нула). Нула пиксели се равнява на нула сантиметри или всяка друга мерна единица. Независимо от това, много често се вижда нещо като padding:0px, където можете да напишете padding:0 и да имате същия ефект.
Няма нищо лошо в добавянето на единица към нуламерки, просто е допълнителен обем и според мен не изглежда добре.
Имайте предвид чувствителността към главни и малки букви
Когато CSS се използва заедно с XHTML, имената на елементите и селекторите стават чувствителни към главни и малки букви. За да избегнете проблемите, свързани с това, препоръчвам винаги да използвате малки букви за имена на елементи в CSS селекторите.
Стойностите на атрибутите на класа и id са чувствителни към главни и малки букви в HTML и XHTML, така че избягвайте смесени главни и малки букви в имената на атрибути на клас и id. Ако по някаква причина използвате смесени главни и малки букви, проверете отново идентичността на главните и малки букви в CSS.
Посочете цветове
Писах за това в статията, спомената по-рано, но я използвам толкова често, че ще го повторя отново: когато цветът в CSS е посочен в шестнадесетична цветова нотация и когато цветът се състои от три двойки шестнадесетични числа, тогава можете да посочите цветовете по-ефективно, като премахнете всяко второ число: #000 е идентичен на #000000, #369 е идентичен на #336699.
И не забравяйте за решетка - символа "#" преди кода на цвета.
Друг цветен съвет е, че можете да посочите безопасни за мрежата цветове, като използвате числа, които се делят на 3 за червени, зелени и сини стойности: 0, 3, 6, 9, C и F. #99c е безопасен цвят, #98c не е.
Изключете типове елементи за клас и идентификатор
Когато пишете селектори, които сочат към елемент със специфични стойности на клас и id, можете да премахнете типа на елемента преди точката (селектор на клас) или преди # (селектор на id).
Така че вместо да пишете:
можеш да пишеш:
и запазете няколко байта за всеки от селекторите.
Това е особено полезно за селектори на id, като уеб страницатате трябва да са уникални, което намалява риска от конфликт на CSS правила. Имената на класовете, от друга страна, могат да се използват произволен брой пъти и различни типове елементи могат да бъдат присвоени на едно и също име на клас (или множество имена). За да разграничите типовете елементи с едно и също име на клас, ще трябва да посочите типа елемент в селектор.
Имайте предвид, че горните CSS правила не са идентични. Ако едно правило е указано без тип елемент в селектора, а друго с тип елемент в селектора, тогава правилото, което използва типа елемент, ще има предимство.
Стойности по подразбиране
Често можете да пропуснете стойността на дадено свойство, разчитайки на стойността по подразбиране на това свойство. Това е особено важно да имате предвид, когато използвате съкратени свойства, тъй като на всяко свойство, което не е указано, се присвоява стойността по подразбиране, съответстваща на това свойство.
Общите настройки по подразбиране са 0 за подложка (въпреки че има няколко изключения) и прозрачен за цвят на фона.
Има разлики между стойностите по подразбиране в различните браузъри. Някои хора предпочитат глобално да нулират свойствата на полето и подложката на всички елементи в началото на CSS файла.
Не задавайте повторно наследени стойности
Стойностите на много свойства се наследяват от всеки наследник на елемента, за който е посочено свойството. Свързаните свойства цвят и шрифт са най-яркият пример за такива свойства.
Имайте предвид, че някои свойства могат да бъдат игнорирани от предварително зададения CSS (напр. настройките по подразбиране на браузъра). Следователно следното правилоне прави всички заглавияудебелени:
Предварително зададените правила на браузъра са по-специфични.
Възползвам секаскадно предимство
Cascade ви позволява да използвате множество правила за свойства на елемент. Можете да замените същото свойство или да дефинирате допълнителни свойства. Да приемем, че имате следния код на страницата:
В CSS можете да използвате едно правило, което се прилага за всички p елементи и друго, което се прилага само за p елементи с клас update:
И двете правила ще бъдат комбинирани за p елементи с актуализация на класа. Класът на селектора е по-важен от типа на селектора, така че когато възникне конфликт, ще се използват свойствата, дефинирани във второто правило. В този случай цвят:#600; .
За информация как се изчисляват правилата на CSS, вижте Изчисляване на спецификите на селектора в спецификацията на CSS 2.1.
Множество имена на класове
Тогава CSS може да изглежда така:
Всяка снимка със специален клас ще бъде заобиколена от 2 пиксела пространство и жълт фон. Снимките с клас royaltyfree ще имат граница от 2 пиксела, а снимките с двата класа ще имат и трите свойства - край, пространство и жълт фон.
Не можете да спрете дотук - това е само пример. Опитайте се да използвате семантично правилни имена на класове, които описват какво прави елементът, а не как изглежда.
Използвайте дъщерни селектори
Неизползването на селектори за наследници е един от най-честите примери за неефективен CSS. Дъщерните селектори могат да ви помогнат да се отървете от много атрибути на клас и да направите вашите CSS селектори по-ефективни. Например вземете следния HTML код:
Този код може да бъде придружен от следния CSS:
Горният пример е неефективен. Следното е пример за ефективен код:
Вашият код трябва да е възможно най-чист. Това позволяванаправете кода на уеб страницата и CSS кода по-ефективни и четливи.
Следва продължение
Нямате любимия си CSS съвет? Спокойно, следва продължение - CSS съвети и трикове, част 2.
- превод: umade.ru оригинал на английски: CSS съвети и трикове, част 1
Благодаря за превода. Открих много нови функции на CSS. Очакваме превода на втората част.
Михаил Дубаков имаше нещо подобно и много силно „CSS: правилното използване е ключът към успеха“, от книгата: „Уеб мастеринг с CSS“. Тази глава може да бъде намерена на WEBMASCON.
Ако стойността не е равна на 0, тогава винаги посочвайте мерната единица