Bootstrap CSS Coding Standards

Poprzedni: Bootstrap standardy kodowania HTML

gramatyka

Z dwoma spacjami zamiast kart (karta) - Jest to jedyny sposób, aby zapewnić spójne podejście, aby pokazać we wszystkich środowiskach.
Gdy przełącznik jest zgrupowane osobno na selektorze wiersza.
Dla czytelności kodu, przed blokiem każda klamra oświadczenie, aby dodać spację.
Brace stwierdzenie blok sama powinna odbyć podróż.
Każda instrukcja jest stwierdzenie : po należy wstawić spację.
W celu uzyskania bardziej dokładne raportowanie błędów, każda instrukcja powinna być w osobnym wierszu.
Wszystkie oświadczenia deklaracja powinna kończyć się średnikiem. Średnik za ostatniego zestawienia deklaracji nie jest obowiązkowe, ale jeśli pominąć średnik, Twój kod może być bardziej mylnego.
Dla wartości własności oddzielonych przecinkami, każdy przecinek powinien być wprowadzony do przestrzeni (na przykład box-shadow ).
NIE rgb() , rgba() , hsl() , hsla() lub rect() za wartościami wewnętrznymi przecinek wstawić spację. Takie korzyści z wielu atrybutów (także oba przecinkiem i spacją) odróżnić wielu wartości kolorów (tylko przecinkami, bez spacji).
Za wartość atrybutu kolor lub parametru pominięte mniej niż 1 przed dziesiętnych 0 (na przykład .5 zamiast 0.5 ; -.5px otrzymuje -0.5px ).
Wartości szesnastkowe powinny być pisane małymi literami, na przykład, #fff . Podczas skanowania dokumentu, małe litery łatwe do odróżnienia, ponieważ ich forma jest łatwiej rozpoznawalne.
Próbować używać skrót od wartości szesnastkowym, na przykład, #fff zamiast #ffffff .
Dodaj cudzysłowów przy wyborze nieruchomości, na przykład, input[type="text"] . Tylko w pewnych okolicznościach jest to opcjonalne , jednak do składania wniosków kodowych konsekwencja w cudzysłowach.
0 szt podanej wartości w celu uniknięcia, na przykład, z margin: 0; zamiast margin: 0px; .

Dla pojęć używanych w niniejszym pytań? Proszę odnieść się do Wikipedii na kaskadowych arkuszy stylów - gramatykę .

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

kolejność deklaracja

Sprawozdanie w dziedzinie własności powinny być pogrupowane i ułożone w następującej kolejności:

Pozycjonowanie
Model Box
typograficzny
wizualny

Jako pozycjonowaniem (pozycjonowanie) można usunąć element z normalnego obiegu dokumentów, a także pokrycie modelu pudełkowej (box) modelu związanego stylu, a więc w pierwszym rzędzie. Model blokowy na drugim miejscu, ponieważ określa rozmiar i położenie elementów.

Inne właściwości wpływają jedynie elementy wewnętrzne (wewnątrz) i nie wpływa na przypisanie dwóch pierwszych grup, więc z tyłu.

Pełna lista właściwości i ich kolejność patrz Recess .

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

Nie używaj `@import`

I <link> w porównaniu tag, @import dowodzić znacznie wolniej, nie tylko zwiększa liczbę dodatkowych wniosków, ale także prowadzić do nieoczekiwanych problemów. Istnieje kilka możliwości:

Korzystanie z wielu <link> Element
Przez Sass lub mniej jak CSS preprocesora wielu plikach CSS zostały zestawione w jeden plik
Przez szyny, Jekyll lub inny system udostępnia funkcję scalania plików CSS

Patrz artykuł Steve Souders celu uzyskania dalszych informacji.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

Zapytania o media (zapytanie Mediów) Pozycja

Zapytania multimedialne umieszczone tak blisko do odpowiednich przepisów. Nie pakować je w jeden plik stylu lub w dolnej części dokumentu. Jeśli wziąć je od siebie, aw przyszłości każdy będzie zapomniane. Oto typowy przykład.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

Z atrybutami prefiksu

Podczas korzystania z atrybutów specyficznych dla dostawcy poprzedzone wcięciem, które umożliwia wartość każdej nieruchomości są wyrównane w kierunku pionowym, to jest łatwe do edycji multi-line.

W TextMate, używając tekstu → Edytuj Każda linia wyboru ( ^ ⌘A). W Sublime Text 2, użyj Wybór → Dodaj Poprzedni LINE (^ ⇧ ↑ ) i wybór → Dodaj następnej linii (^ ⇧ ↓ ).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Oświadczenie regułą jednoliniowy

Dla stylów, które zawierają jedynie oświadczenie, w celu ułatwienia czytelności i szybki montaż, zalecamy rachunku w tym samym wierszu. Dla wielu stylach z deklaracji lub oświadczenia powinny być podzielone na kilka linii.

Kluczowym elementem tego rozwiązania jest to, aby wykryć błędy - na przykład, walidator CSS zwrócił uwagę, że linia 183 ma błąd składni. Jeśli jest to pojedyncza linia pojedyncza stwierdzenie, że nie będzie ignorował ten błąd, jeśli jest więcej niż stwierdzenie pojedynczej linii, trzeba dokładnie przeanalizować błędy, aby uniknąć brakuje.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

Skrócone deklaracje własności

W potrzebie jawnie ustawić wartość wszystkich przypadkach, powinniśmy starać się ograniczyć stosowanie skróconych deklaracji majątkowych. Sytuacja powszechnie nadużywane skróconą własnością zadeklarowana następująco:

padding
margin
font
background
border
border-radius

W większości przypadków nie musimy określić wszystkie wartości atrybutów dla deklaracji skróconej formie. Na przykład, kierując się tylko na elementy HTML ustawionego górnego i dolnego marginesu wartości (marża), w związku z tym, w razie potrzeby, po prostu obejmujące te dwie wartości mogą być. Nadmierne używanie krótka forma deklaracji majątkowych może prowadzić do zamieszania kodu, wartość nieruchomości i przyniesie niepotrzebnego nakładania powodując nieoczekiwane skutki uboczne.

MDN (Mozilla Developer Network) w bardzo dobrym pomysłem o właściwościach skrót wyrobu, dla mniej znanego skróconej deklaracji majątkowych i zachowań użytkownika jest przydatna.

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Coraz Sass zagnieżdżone

Unikaj niepotrzebnego zagnieżdżania. To dlatego, choć można użyć gniazda, ale to nie znaczy, trzeba zastosować zagnieżdżone. Tylko w stylu należy ograniczyć w ramach elementu nadrzędnego (czyli selektor potomka), a wystarczy tylko wiele elementów zagnieżdżonych korzystając zagnieżdżone istnieje.

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

uwaga

Kod jest napisany i utrzymywany przez ludzi. Upewnij się, że kod może być samoopisanym, dobrze skomentował i łatwe do zrozumienia innych. Dobre komentarze kod może przekazać kontekst i cel kodu. Nie wystarczy przypomnieć, komponent lub nazwę klasy.

W przypadku dłuższych komentarzy, należy napisać pełne zdanie, na ogólnych uwag, można napisać prostych wyrażeń.

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

Nazwa klasy

Nazwy klas mogą pojawić się tylko małe litery i kreski (dashe) (nie podkreślone ani garb nomenklatury). Dash powinien być stosowany dla danej klasy o nazwie (np nazw) (na przykład .btn i .btn-danger ).
Należy unikać nadmiernego dowolny skrót. .btn przedstawiciele przycisk, ale .s nie wyrażają żadnego znaczenia.
Nazwa klasy powinny być krótkie i jasne znaczenie.
Użyj znaczące nazwy. Zorganizowanej lub celowe używanie nazwy nie wolno używać wyrażeń (prezentacyjnego) nazwę.
Na podstawie najbliższego klasy nadrzędnej lub podstawowej (bazowej) klasy jako prefiksu dla nowej klasy.
Użyj .js-* Klasa zidentyfikować zachowanie (w przeciwieństwie do stylu) i nie zawierają te klasy do pliku CSS.

Sass i mniej dla zmiennego nazewnictwa jest również czytać wszystkie wymagania wymienione powyżej.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

selektor

Na wspólne elementy użyć klasy, więc sprzyja optymalizacji wydajności renderingu.
Dla składniki często unikają korzystania z selektorów własności (na przykład [class^="..."] ). Wydajność przeglądarka będzie miała wpływu tych czynników.
Selektory jak najkrótszy, i starają się ograniczyć liczbę elementów selektora, zaleca się, aby nie przekraczać 3.
Tylko wtedy, gdy jest to konieczne, aby ograniczyć w ostatniej klasie elementu nadrzędnego (czyli selektor potomka) (Na przykład, nie należy korzystać z klasy z prefiksem - namespace prefix jest podobna).

Dalsze informacje:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Organizacja code

Komponent-unit Kod organizacji.
Tworzenie spójnej specyfikacji adnotacji.
Użyj spacji spójnego podzielone na bloki kodu, więc sprzyja skanowanie dużych dokumentów.
Jeżeli więcej niż jeden plik CSS, w postaci wydzielenia zespołu zamiast strony, ponieważ strona zostanie zreorganizowana, a zespół zostanie przeniesiony.

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

Edytor konfiguracji

Twój edytor zgodnie z następującymi ustawieniami konfiguracyjnymi, aby uniknąć typowych niezgodności kodu i różnice:

Dwie przestrzenie zamiast zakładki (soft-kartę, która jest reprezentatywna dla znaków karty ze spacjami).
Po zapisaniu pliku, aby usunąć spacje z tyłu.
Ustaw kodowanie pliku na UTF-8.
Na końcu pliku dodać pusty wiersz.

Odnosząc się do dokumentu i dodać informacje o konfiguracji z projektem .editorconfig pliku. Na przykład: na Bootstrap w .editorconfig instancji . Aby uzyskać więcej informacji, zapoznaj się z O EditorConfig .

Poprzedni: Bootstrap standardy kodowania HTML

Bootstrap kurs

Bootstrap CSS

Bootstrap Elementy układu

Bootstrap Widget

Bootstrap inny

Bootstrap CSS Coding Standards

gramatyka

kolejność deklaracja

Nie używaj `@import`

Zapytania o media (zapytanie Mediów) Pozycja

Z atrybutami prefiksu

Oświadczenie regułą jednoliniowy

Skrócone deklaracje własności

Coraz Sass zagnieżdżone

uwaga

Nazwa klasy

selektor

Organizacja code

Edytor konfiguracji

Bootstrap kurs

Bootstrap CSS

Bootstrap Elementy układu

Bootstrap Widget

Bootstrap inny

Bootstrap CSS Coding Standards

gramatyka

kolejność deklaracja

Nie używaj @import

Zapytania o media (zapytanie Mediów) Pozycja

Z atrybutami prefiksu

Oświadczenie regułą jednoliniowy

Skrócone deklaracje własności

Coraz Sass zagnieżdżone

uwaga

Nazwa klasy

selektor

Organizacja code

Edytor konfiguracji

Nie używaj `@import`