Эмне үчүн жөнөкөй үтүр код жөнөкөйлөштүрүүгө
CSS, же Стилдердин каскаддык Жарчысы, сайтка көрсөтмө стилдерди кошуп дизайн тармагында кабыл алынган болуп саналат. CSS менен сиз барак макети, түстөрдү, көзөмөлдөй аласыз Оюп Картинка, жана дагы көп. Мындайча айтканда, ал бир стили болсо, анда сиздин CSS сайтына ошол образын алып ыкмасы болуп саналат.
Эгер документ CSS стилдерди кошуп, сен документ узак жана узак боло баштаса экенин байкаса болот. Ал тургай, беттен бир нече кичинекей сайт басымдуу CSS делосуна менен аякташы мүмкүн - жана өзгөчө мазмун барактарынын өкчөмө таш менен өкчөмө таш менен абдан чоң сайттын абдан чоң CSS материалдары болот. Бул менен татаалдашып, жооп сайттардын көп медиа суроо көрүнүүчү карап барак ар экрандарда үчүн жыйнаган кантип өзгөртүү стили киргизилген.
Ооба, CSS Files узун ала аласыз. (Бул чын эле тексттик документ болуп саналат, анткени), ал тургай, узак CSS билэ абдан аз болушу мүмкүн эмес, анткени бул сайт аткаруу жана Ылдамдыгы келгенде, бул негизги маселе эмес. Ошентсе да, бул бет ылдамдык келгенде ар бир аз эсеби, сиз стилдер жадыбалы күчсүз болот болсо, бул жакшы идея. Бул "үтүр" Сенин стилдин өтө таанытып келе албайт жерде!
Commas жана CSS
Сиз үтүр ойнойт ролу кандай деп тынчсызданышы мүмкүн CSS селектор синтаксис. Сүйлөмдүн эле, үтүр тазалыгы эмес, кодду үчүн СЕПАРАТОРЫ келет. Бир үтүр CSS селектор эле стилдеги бир нече селекторлор ажыратат.
Мисалы, төмөндө айрым CSS карап көрөлү.
чи {түсү: кызыл; }
TD {түсү: кызыл; }
p.red {түсү: кызыл; }
бөлүү # firstred {түсү: кызыл; }
Бул синтаксиси менен, сиз кызыл тобу менен чи теги, ТД теги, абзац теги келет деп жатышат, ID менен бөлүү теги стили кызыл түстүн болушу үчүн, ар firstred.
Бул CSS толук ылайыктуу, бирок буга жазууда эки олуттуу кемчиликтери бар:
- Келечекте, бул касиеттер көк үчүн арип түсүн өзгөртүү жөнүндө чечим кабыл алса, анда ал өзгөртүү стилдин төрт жолу барууга туура келет.
- Бул кереги жок сиздин стилдин кошумча белгиден көп кошот. Бул 4 стилдери Overkill сыяктуу сезилиши мүмкүн, бирок, сен бүт стилдин боюнча, бул иш мындан ары да болсо, саптары кошуу жана ошол барактын ал болушу керек караганда, алда канча көп болот.
Бул кемчиликтерди кача алабыз, жана сиздин CSS билэни тартипке келтирүү, биз үтүр аркылуу аракет кылат.
Колдонуу өзүнчө Selectors үчүн үтүр
Бирок 4-өзүнчө CSS селекторлор жана 4-эрежелерин жазып, бир үтүр менен жеке селекторлор бөлүп бир эреже мүлктүн баарын бул стилин биригишет. Мына, бул эмне болмок болот:
чи, ТД, p.red, бөлүү # firstred {түсү: кызыл; }
үтүр мүнөзү негизинен селектор ичиндеги сөзү "жана" катары кызмат кылат. Демек, бул ч теги ЖАНА TD теги ЖАНА абзац ID firstred менен класстын кызыл жана бөлүү тег менен теги м да тиешелүү. Бул так, биз мурда эле болуп саналат, бирок анын ордуна 4 CSS эрежелерин муктаж, биз бир нече селекторлор менен бир эреже бар. Бул үтүр селектор менен эмне болот, бул бир эле эреже менен бир нече селекторлор ээ болууга мүмкүнчүлүк берип жатат.
Гана эмес, мындай мамиле кара кесек, таза CSS билэлэри кылат, ошондой эле алда канча кыйын келечектеги өзгөрүүлөр болот. Сиз түсү кызыл көк өзгөртүүнү каалаган болсо, сен гана эмес, биз болгон баштапкы 4 эрежелери боюнча бир жерде өзгөртүү керек! бүтүндөй CSS File аркылуу бул убакыт үнөмдөө жөнүндө ойлонуп жана узак -руханий бул сизге убакыт жана мейкиндик да сактап көрө аласыз!
Syntax Variation
Кээ бир адамдар CSS дагы ордуна жазып, аны ар бир сапта жогоруда, өз саптагы ар селектор бөлүп даана кылып тандап алган. Бул эмне болот, кандай болот:
чи,
ТД,
p.red,
бөлүү # firstred
{
Кызыл түс;
}
Сен өз сапта көздөй кийинки селектор бузууга "кирип," ар бир селектор кийин жана андан пайдалануу үтүр коюп жатканын карап көрөлү. Сиз акыркы селектор кийин үтүр кошуу ЭМЕС.
Сиздин тэг ортосундагы үтүр пайдалануу менен, сиз, келечекте тактоо жөнөкөйүрөөк бир кыйла кыска стилдер жадыбалы түзүү жана бүгүн окуу кыйын болот!
Атайга Krynin тарабынан Original макалада. Jeremy Джирард тарабынан 5/8/17 күнү өзгөртүлдү