CSS / CSS шилдэг туршлага
CSS шилдэг туршлага
CSS-ийн синтакс сурах хялбар ч удирдахад хэцүү болдог. Том төсөлд CSS хэрхэн зохион байгуулах, цаашид засахад хялбар байлгах зарчмуудыг энд үзнэ.
Cascading-г ухаалгаар ашиглах
CSS-ийн "Cascading" шинж чанар нь зөв ашиглаагүй тохиолдолд асуудал үүсгэдэг. Зарчим нь: ерөнхий дүрмийг эхэнд, тусгай дүрмийг дараа бичих.
css
/* ЗӨВ: ерөнхийгөөс тусгай руу */
/* 1. Үндсэн (reset/base) */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #f1f5f9;
line-height: 1.5;
}
/* 2. Component */
.btn {
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
}
/* 3. Modifier */
.btn--primary {
background: #a78bfa;
color: white;
}
.btn--sm {
padding: 4px 10px;
font-size: 0.85rem;
}
Specificity бага байлгах
Specificity өндөр болох тусам CSS-г override хийхэд хэцүү болдог. !important-г аль болох ашиглахгүй байх нь зорилго.
css
/* МУУГААР: specificity өндөр */
div#main .container ul li a.link {
color: #a78bfa;
}
/* САЙНААР: specificity бага */
.nav-link {
color: #a78bfa;
}
Specificity тооцоолох:
код
inline style → 1,0,0,0
id selector → 0,1,0,0
class/pseudo → 0,0,1,0
element → 0,0,0,1
/* Жишээ */
#nav .link:hover → 0,1,1,1
.nav-link → 0,0,1,0 ← энэ дээр нь
css
/* !important ашиглахаас зайлсхийх */
/* МУУГААР */
.card {
color: white !important;
}
/* САЙНААР — specificity зааж тодорхойлох */
.dark-theme .card {
color: white;
}
Meaningful class нэр
Class нэр нь яагаад байгааг тайлбарлах ёстой, харагдах байдлаа биш:
css
/* МУУГААР — харагдах байдлыг нэрлэж байна */
.red-text {
}
.big-font {
}
.left-column {
}
.mt-20 {
}
/* САЙНААР — утгыг нэрлэж байна */
.error-message {
}
.section-title {
}
.sidebar {
}
.card-spacing {
}
BEM (Block Element Modifier) аргачлал:
css
/* Block */
.card {
}
/* Element — block-ийн дотор байгаа хэсэг */
.card__title {
}
.card__body {
}
.card__footer {
}
/* Modifier — хувилбар, төлөв */
.card--featured {
}
.card--sm {
}
.card__title--large {
}
html
<div class="card card--featured">
<h2 class="card__title card__title--large">Гарчиг</h2>
<p class="card__body">Текст</p>
<div class="card__footer">...</div>
</div>
Shorthand тохиромжтой ашиглах
Shorthand нь код богиносгодог ч заримдаа санамсаргүй утгуудыг дарж бичдэг:
css
/* margin shorthand */
margin: 16px; /* 4 тал тэнцүү */
margin: 16px 8px; /* дээш/доош, зүүн/баруун */
margin: 16px 8px 24px; /* дээш, зүүн/баруун, доош */
margin: 16px 8px 24px 4px; /* дээш, баруун, доош, зүүн */
/* padding, border-radius ч мөн адил */
padding: 8px 16px;
border-radius: 8px 4px 8px 4px;
css
/* background shorthand — болгоомжтой */
/* background shorthand нь бусад утгыг default-ээр дарна */
.card {
background-color: #0f172a;
background-image: url("pattern.svg");
}
/* Дараа нь дагаад бичивэл background-image арилна */
.card--dark {
background: #1e293b; /* background-image: none болж хувирна */
}
/* ЗӨВ — зөвхөн өнгө өөрчлөх */
.card--dark {
background-color: #1e293b;
}
css
/* font shorthand */
/* font: style weight size/line-height family */
font: italic bold 16px/1.6 sans-serif;
/* Тусад нь бичих нь уншихад илүү тодорхой */
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.6;
font-family: sans-serif;
CSS Custom property-г өргөнөөр ашиглах
css
/* ЗӨВ: `:root`-д тодорхойлох */
:root {
/* Өнгө */
--color-bg: #0b1120;
--color-surface: #0f172a;
--color-border: #1e293b;
--color-text: #f1f5f9;
--color-muted: #94a3b8;
--color-accent: #a78bfa;
/* Зай */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
/* Transition */
--transition: 0.2s ease;
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition);
}
.card:hover {
box-shadow: var(--shadow-md);
}
CSS зохион байгуулалт
css
/* Файл доторх дараалал */
/* 1. Custom property */
:root {
}
/* 2. Reset / Normalize */
*,
*::before,
*::after {
}
body {
}
/* 3. Typography */
h1,
h2,
h3 {
}
p {
}
/* 4. Layout (grid, flex container) */
.container {
}
.grid {
}
/* 5. Component */
.card {
}
.btn {
}
.badge {
}
/* 6. Utility */
.sr-only {
}
.flex-center {
}
/* 7. Media query — сүүлд */
@media (max-width: 768px) {
}
Selector дотор property-ийн дараалал:
css
.element {
/* 1. Position */
position: relative;
top: 0;
z-index: 1;
/* 2. Display / Box model */
display: flex;
width: 100%;
padding: 16px;
margin: 0 auto;
/* 3. Visual */
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
/* 4. Typography */
font-size: 1rem;
color: #f1f5f9;
line-height: 1.6;
/* 5. Animation */
transition: all 0.2s ease;
}
Нийтлэг алдаануудаас зайлсхийх
css
/* 1. Magic number ашиглахгүй */
.element {
margin-top: 37px; /* яагаад 37? → var(--space-lg) ашиглах */
}
/* 2. Хэт өргөн selector */
.page > div > ul > li > a {
} /* МУУГААР */
.nav__link {
} /* САЙНААР */
/* 3. Устгасан код үлдээхгүй */
/* .old-btn { color: red; } ← устгах */
/* 4. Тайлбар хэрэгтэй газарт тайлбарлах */
.visually-hidden {
/* Screen reader-д харагдах боловч дэлгэцэнд биш */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
Эцсийн шалгах жагсаалт
код
✅ Class нэр утга тодорхой байна уу?
✅ Specificity хэрэгцээгүй өндөр биш үү?
✅ !important ашиглаагүй байна уу?
✅ Custom property ашигласан уу?
✅ Magic number байхгүй юу?
✅ Mobile-д шалгасан уу?
✅ Ашиглагдаагүй CSS арилгасан уу?
✅ @media query байрандаа байна уу?
Дараагийн хичээлд:
CSS курсийн эцсийн төсөл — сурсан бүх зүйлийг нэгтгэн portfolio хуудас хийнэ.