Неге қарапайым үтір кодты жеңілдетеді?
CSS немесе Cascading Style Sheets веб-дизайн саласы сайтқа визуалды мәнерлерді қосудың қабылданған жолы болып табылады. CSS көмегімен сіз бет орналасуын, түстерін, типографиясын , фондық суретті және тағы басқаларды басқара аласыз. Негізінен егер бұл визуалды стиль болса, онда CSS бұл стильдерді сіздің веб-сайтыңызға әкелуге мүмкіндік береді.
Құжатқа CSS стильдерін қосқаныңызда, құжаттың ұзағырақ әрі ұзағынан бастайтынын байқайсыз. Тіпті бірнеше беті бар кішігірім сайт пайдалы CSS файлымен аяқталуы мүмкін және көп мәнді және көптеген мазмұнды беттер бар өте үлкен сайт CSS файлдарының үлкен болуы мүмкін. Бұл көрнекі көріністердің қалай көрінетінін және бет әртүрлі экрандарға арналғанын өзгерту үшін мәнер парақтарына кіретін көптеген медиа сұраулары бар жауап беретін сайттармен қиындатады.
Ия, CSS файлдары ұзақ уақыт алады. Бұл сайттың өнімділігі мен жүктеу жылдамдығымен байланысты мәселе емес, себебі ұзақ CSS файлы өте кішкентай болуы мүмкін (бұл шын мәнінде мәтіндік құжат болғандықтан). Дегенмен, кез келген сәтте бет жылдамдығына байланысты саналады, сондықтан егер сіз өзіңіздің стиль кестеңізді жасай алсаңыз, бұл жақсы идея. Мұнда «үтір» сіздің стиль кестеңізде өте ыңғайлы болуы мүмкін!
Commas және CSS
Сіз CSS селекторлық синтаксисінде үтірдің қандай рөл атқаратыны туралы ойлануыңыз мүмкін. Сөйлемде айтылғандай, үтір сепараторларға - код емес, анықтығын береді. CSS селекторындағы үтір бір стильдегі бірнеше селекторларды бөледі.
Мысалы, төменде берілген кейбір CSS-ді қарастырайық.
th {түсі: қызыл; }
td {түсі: қызыл; }
p.red {түсі: қызыл; }
div # firstred {түсі: қызыл; }
Осы синтаксисті пайдаланып, th тегтерін, td тегтерін, еже тегтерін сыныпты қызыл түспен және div тегінің идентификаторы барлығын сіз мәнердің түсі қызыл түске ие болуын білдірдіңіз.
Бұл өте қолайлы CSS, бірақ оны жазу үшін екі маңызды кемшіліктер бар:
- Болашақта, осы сипаттардың қаріп түсін өзгертуін қаласаңыз, бұл өзгертуді мәнер парағынан төрт рет өзгертуіңіз керек.
- Сізге қажеті жоқ стиль кестесіне көптеген қосымша таңбалар қосылады. Бұл 4 стильдер переопределяемый көрінуі мүмкін, бірақ егер сіз мұны бүкіл стилі парағының ішінде, сызбалар қосылады және бұл парақ әлдеқайда көп болады, ол қажет.
Бұл кемшіліктерді болдырмау және CSS файлыңызды оңтайландыру үшін үтірлерді қолдануға тырысамыз.
Бөлектелген селекторларға арналған үтірлерді пайдалану
4 жеке CSS селекторларын және 4 ережені жазудың орнына, осы стильдерді бір ереже сипатына жеке селекторларды үтірмен бөлу арқылы біріктіруге болады. Мұны қалай істеуге болады:
th, td, p.red, div # firstred {түсі: қызыл; }
Үтір таңбасы негізінен селектордың ішінде «және» сөзі ретінде қолданылады. Мәселен, бұл тегтерге AND td tags мен ЖЖЕ тегтеріне сыныптың қызыл түбірімен және div тегіне бірінші рет ID-мен бірге қолданылады. Дәл сол бұрын бізде болған, бірақ 4 CSS ережесіне мұқтаж емес, бірнеше селектормен бір ереже бар. Бұл селектордағы үтір, ол бір ережеде бірнеше селекторға ие болуға мүмкіндік береді.
Бұл тәсіл тек оқшау, таза CSS файлдары үшін ғана емес, болашақ жаңартуларды да оңайырақ етеді. Енді сіз түстен қызылдан көкке өзгерткіңіз келсе, бастапқы 4 стилінің ережелеріне емес, тек бір орында өзгеруіңіз керек! Барлық уақытты CSS файлы арқылы үнемдеу туралы ойлап көріңіз және бұл сізді ұзақ уақытқа және уақытқа дейін үнемдейтінін көре аласыз!
Синтаксисті өзгерту
Кейбір адамдар CSS-ді неғұрлым түсінікті етіп, әрбір селекторды өз сызығымен бөліп, оны бір сызықпен жоғарыда көрсетілгендей жазуға тырысады. Мұны қалай істеуге болады:
ші,
td,
p.red,
div # firstred
{
түсі: қызыл;
}
Әр селектордан кейін үтірді орналастырып, содан кейін келесі селекторды өз сызығына шығару үшін «енгізу» функциясын қолданыңыз. Соңғы селектордан кейін үтір қоспайсыз.
Селекторлар арасында үтірлерді пайдалану арқылы сіз болашақта жаңартуға жеңілірек ықшам стил кестесін жасайсыз және бұл бүгінгі күні оңайырақ!
Дженнифер Крининнің түпнұсқа мақаласы. Джереми Джирард 5/8/17 жылы редакцияланған