CSS və Sass-a əsaslı bir yanaşma

1. Terminologiya
   • Declaration qaydası
   • Seçicilər
   • Properties
2. CSS
   • Format
   • Commentlər
   • OOCSS və BEM
   • ID Seçicilər
   • JavaScript hooks
   • Border
3. Sass
   • Sintaksis
   • Property sılaması
   • Dəyişkənlər
   • Mixinlər
   • Genişləndirilmiş directive
   • Nested seçicilər
4. Tərcümələr
5. Lisenziya

Declaration Qaydası Seçicilərə və ya seçicilər qrupuna verilən addır , propertilərlə birlikdə istifadə edilir. Nümunə aşağıda verilmişdir:

.listing {
  font-size: 18px;
  line-height: 1.2;
}

Declaration qaydasına əsasən "seçicilər" Dom ağacındakı elementləri təyin edilmiş propertilərə əsasən stilləşdirən bitlərdir. Seçicilər HTML elementlərinə həm də elementlərin class ID yada başqa atributlarına uyğunlaşır. Aşağıda nümunə verilmişdir:

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

Son olaraq Propertilər seçilmiş elementlərə təyin edilən dizayn qayadalrıdır.Propertilər key-value cütlüyündən ibarətdir. Propertilərə nümunə aşağıdakı kimidir:

/* some selector */ {
  background: #f1f1f1;
  color: #333;
}

⬆ başa qayıt

• Abzas üçün yumuşaq nişan istifadə edin (2 boşluq) .
• Class adlarında camelCase əvəzinə tirelərdən istifadə edin.
  • Lakin BEM istifadə edirsinizsə alt-tire və PascalCase istifadə edə bilərsiniz (OOCSS and BEM).
• ID seçicilər istifadə etməyin.
• Bir neçə sellectoru birlikdə istifadə etdikdə hərəsi üçün bir sətir istifadə edin.
• {-dan sonra boşluq istifadə edin .
• : -dan sonra boşluq istifadə edin (əvvəl yox).
• } -ı yeni sətirdə istifadə edin.
• Hər bir deklarasiyadan sonra boş bir sətir buraxın.

Pisdir

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

Yaxşıdır

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

• Sətir şərhlərindən istifadə edin (// in Sass-land) .
• Öz sətiriniz üçün şərhlərinizdən istifadə edin. Sonda şərh yazmaqdan çəkinin.
• Kod üçün ətraflı şərh yazın lakin bu dokumentasiya olmasın:
  • Z-indexin istifadəsi
  • Fərdi brauzerlər və uyğunluq üçün CSS hiylələri

Aşağıdaki səbəblərə görə OOCSS və BEM istifadəsini tövsiyə edirik.

• CSS və HTML arasında təmiz və dəqiq əlaqələr yaradırıq.
• Yenidən istifadə edilə bilən və birləşdirilə bilən komponentlər yarada bilirik.
• Daha az nesting və daha az spesifikliyə imkan verir.
• Ölçüləndirilə bilən still faylı yaratmağımıza kömək edir.

OOCSS, və ya “Object Oriented CSS”, CSS kodlarımıza obyektlər kollektivi kimi yanaşmağımıza kömək edir.

• Nicole Sullivan's OOCSS wiki
• Smashing Magazine's Introduction to OOCSS

BEM, or “Block-Element-Modifier”, CSS-da adlandırma_üsuludur . It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS. Yandex tərəfindən yaradılmışdır və OOCSS-ya solid qaydalar dəsti olaraq xidmət edir.

• CSS Tricksdən BEM 101
• Harry Robertsin introduction to BEM
• Simuratlinin BEM nədir?

Biz BEM-i PascalCased “blocklarla” istifadəsini məsləhət görürük, çünki komponentlərlə birləşəndə olduqca yaxşı və rahat istifadə edilir. (e.g. React). Alt tire və tirelər modifierlər and childrenlərdə istifadə edilir.

Nümunə

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

• .ListingCard higher-level componenti göstərən blokdur.
• .ListingCard__title is an “elementdir” və .ListingCardın övladıdır. Blokun bit bütün olaraq yaradılmasına kömək edir.
• .ListingCard--featured “modifierdir” və .ListingCard elementinin fərqli dizaynlarını əhatə edir.

CSSdə İD seçicilər mövcud olsalarda, ümumən anti-pattern hesab edilirlər. İD seçicilədən istifadə sizin deklarasiyanıza lazımsız dərəcədə yüksək özünəməxsusluq qazandırır bu isə kodlarınızın yenidən istifadəsinə imkan vermir.

Bu mözu haqqında daha çox öyrənmək üçün CSS Wizardry'ın məqaləsinə nəzər yetirin.

CSS və Javascriptinizi eyni class-a bağlamaqdan çəkinin. İkisini qarışdırmaq bu layihə üzərində işləyən başqa bir developerin əlavə zaman sərf etməsinə və bu kod üzərində dəyişiklik etdikdə funksionallığın qırılmasından qorxmasına səbəb olacaq.

Biz JavaScript üçün təyin edilən class-ların .js- ön şəkilçisi ilə istifadəsini məsləhət görürük:

<button class="btn btn-primary js-request-to-book">Request to Book</button>

Borderin olmadığını bildirmək üçün none əvəzinə 0 dan istifadə edin.

Bad

.foo {
  border: none;
}

Good

.foo {
  border: 0;
}

⬆ back to top

• Həmişə .scss sintaksisi istifadə edin, .sass deyil
• CSS-lərinizin @include deklarasiyalarının məntiqi sırası:

1. Property declarations

   `@include` və ya iç-içə olmayan  propertilərinizi standart şəkildə sıralayın.
   

   .btn-green {
     background: green;
     font-weight: bold;
     // ...
   }

2. @include declarations

   @includenin sonda istifadəsi oxunmanı asanlaşdırır.

   .btn-green {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
     // ...
   }

3. İç-içə seçicilər

   Nested seçicilərdə, əgər vacibdirsə, sonda istifadə edin, onlardan əvvəl heçnə istifadə etməyin. İç içə seçicilər arasında boşluq buraxın. Bütün nested seçicilərrinizə eyni üsulu tətbiq edin.

   .btn {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
   
     .icon {
       margin-right: 10px;
     }
   }

camelCased və ya snake_cased əvəzinə Dash-cased dəyişkən adlarına üstünkük verin ($my-variable) . Alt tiredən istidadə edilən dəyişkənlər ancaq eyni səhifədə istifadə edilmirsə işlədilər bilər vəə alt tire dəyişkən adının önünə təyin edilir. ( $_my-variable).

Yaxşı adlandırılmış funksiyalar kimi Mixinlərdə kodunuzu quru tutmaq və təmiz tutmaq üçün istifadə edilməlidir. Mixinlər bunun üçün olduqca faydalıdır lakin gzip kimi faly kiçildicilər istifadə etmirsinizsə bu sizin faylınızda çoxlu kod təkrarı yarada bilər.

Xüsusi ilə nested sellectorlar ilə @extend qeyri-ixtiyari və təhlükəli olduğun üçün çəkinilməlidir. Üst səviyyədəki bir seçiciyə tətbiq edilən @extend sonralar o seçicinin sırasının dəyişdirilməsi zaman problem yarada bilir(məsələn faylların növbəli oxunmasına əsasən.). Gzippingi istifadə etdiyinizdə siz @extenddə edə biləcəyiniz bütün şeyləri əhatə edə bilirsiniz və mixinlər istifadə edərək kodunuzu təmiz və quru tuta bilərsiniz.

3 səviyyədən çox nested element istifadə etməyin

.page-container {
  .content {
    .profile {
      // DAYANIN!
    }
  }
}

Seçiciləriniz çox uzun olduğu zaman sizin CSS kodunuz:

• HTML(kövrək) ilə güclü bağlılıq —və ya—
• Həddindən artıq spesifik (güclü) —və ya—
• Yenidən istifadəyə qapalı

Yenidən: iç içə seçicilərə ID seçici istifadə etməyin! Əgər məcburi olaraq ID seçici istifadə etməliyiksə heç vaxt nested seçici içərisinə daxil olmamalıdır. Bunu etsəniz belə niyə bu qədər güclü bir spesifikliyə ehtiyac olduğunu nəzərdən keçirməlisiniz.Əgər əla formatda bir HTML və ya CSS yazmaq istəyirsinizsə heç vaxt bunu etməyə ehtiyac duymayın.

⬆ Başa qayıt

Aşağıdakı dillərdə bu mənbələrə çata bilərsiniz:

• Bahasa Indonesia: mazipan/css-style-guide
• Chinese (Traditional): ArvinH/css-style-guide
• Chinese (Simplified): Zhangjd/css-style-guide
• French: mat-u/css-style-guide
• Japanese: nao215/css-style-guide
• Korean: CodeMakeBros/css-style-guide
• Portuguese (Brazil): felipevolpatto/css-style-guide
• Portuguese (Portugal): SandroMiguel/airbnb-css-style-guide
• Russian: rtplv/airbnb-css-ru
• Spanish: ismamz/guia-de-estilo-css
• Vietnamese: trungk18/css-style-guide
• Italian: antoniofull/linee-guida-css
• German: tderflinger/css-styleguide;
• Azerbaijanian: [https://github.com/Simuratli/airbnb-css-az)

⬆ back to top

(The MIT License)

Copyright (c) 2015 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ back to top