Salamlar. Bugün sizlərə CSS kodlaşdırarkən ən çox yol verilən səhvlər haqqında danışacağam.
Əslində konkret olaraq “səhv” deyə bilmərik amma CSS`in öz bəlli standartları var
və kodlar standartlara uyğun şəkildə yazılmalıdır.
1. Kod strukturu
Bu bölməyə çoxda diqqət edilmir. Bunu bir çox böyük proyektlərdədə görmüşəm və bəzən “tezbazar” kod yazmalı olanda özümdədə olur bu xətalar. 
Doğru yazılış :
Kod:
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
Yanlış yazılış :
Kod:
#selector-1, #selector-2, #selector-3 {
background: #fff;
color: #000;
}
#selector-1 { background: #fff; color: #000; }
2. Seçicilər
Burada seçicilərin adlandırılmasına diqqət yetirmək lazımdır , proyekt uzanıb getdikcə class , ID ` adlarını
gördükdə başa düşməliyik ki o nəyi ifadə edir. Və underscore (_) işlətməmək daha uyğyndur.
Doğru :
Kod:
#comment-form {
margin: 1em 0;
}
input[type=”text”] {
line-height: 1.1;
}
ode]
Yanlış :
Kod:
#commentForm { /* Class`ın adının ortasında böyük hərf olmasın */
margin: 0;
}
#comment_form { /* Underscore işlənməməlidir */
margin: 0;
}
div#comment_form { /* elementin ID`sini yazmaq kifayətdir */
margin: 0;
}
#c1-xr { /* Daha açıqlayıcı adlar işlənməlidir */
margin: 0;
}
input[type=text] { /* [type="text"] Olmalıdır */
margin : 0 ;
}
margin : 0 ;
}[/code]
3. Dəyərlər (Properties)
Burada əsasən dəyərlərin yazılış qaydasına və ardıcıllığına baxılır. Məsəlçün dəyər kiçik hərflərlə yazılmalıdır ,
”sıfır” dəyirinin yanına “px” kimi ölçü vahidləri yazmağa ehtiyac yoxdur və s.
Doğru :
[code]#selector-1 {
background: #fff;
display: block;
margin: 0;
margin-left: 20px;
}[/code]
Yanlış :
[code]#selector-1 {
background:#FFFFFF; /* FFFFFF olmaz ! */
display: BLOCK; /* BLOCK yox block */
margin-left: 20PX; /*20PX olmaz 20px olamlıdır */
margin: 0;
}[/code]
Və bloklarda ardıcıllıq bu formada getməlidir :
Display ( Block , Flex , Grid )
Positioning ( Relative , Absolute vs. )
Box model ( Padding & Margin dəyərləri )
Colors and Typography ( Rənglər və s. )
Other
Nümunə :
[code]#overlay {
display: block ;
position: absolute;
z-index: 1;
padding: 10px;
background: #fff;
color: #777;
}[/code]
Oxuduğunuz üçün təşəkkürlər!
./JahangirSeven
