Najlepszy samouczek Bootstrap CSS Coding Standards W 2024 r. W tym samouczku możesz dowiedzieć się 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,
:
po należy wstawić spację. box-shadow
). 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). .5
zamiast 0.5
; -.5px
otrzymuje -0.5px
). #fff
. Podczas skanowania dokumentu, małe litery łatwe do odróżnienia, ponieważ ich forma jest łatwiej rozpoznawalne. #fff
zamiast #ffffff
. input[type="text"]
. Tylko w pewnych okolicznościach jest to opcjonalne , jednak do składania wniosków kodowych konsekwencja w cudzysłowach. 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; }
Sprawozdanie w dziedzinie własności powinny być pogrupowane i ułożone w następującej kolejności:
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; }
@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:
<link>
Element 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 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 { pl. } .element-avatar { pl. } .element-selected { pl. } @media (min-width: 480px) { .element { pl.} .element-avatar { pl. } .element-selected { pl. } }
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); }
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(pl/img/sprite.png); } .icon { background-position: 0 0; } .icon-home { background-position: 0 -20px; } .icon-account { background-position: 0 -40px; }
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; }
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 { … } }
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 { pl. } /* Good example */ /* Wrapping element for .modal-title and .modal-close */ .modal-header { pl. }
.btn
i .btn-danger
). .btn
przedstawiciele przycisk, ale .s
nie wyrażają żadnego znaczenia. .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 { pl. } .red { pl. } .header { pl. } /* Good example */ .tweet { pl. } .important { pl. } .tweet-header { pl. }
[class^="pl."]
). Wydajność przeglądarka będzie miała wpływu tych czynników. Dalsze informacje:
/* Bad example */ span { pl. } .page-container #stream .stream-item .tweet .tweet-header .username { pl. } .avatar { pl. } /* Good example */ .avatar { pl. } .tweet-header .username { pl. } .tweet .avatar { pl. }
/* * Component section heading */ .element { pl. } /* * Component section heading * * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough. */ .element { pl. } /* Contextual sub-component or modifer */ .element-heading { pl. }
Twój edytor zgodnie z następującymi ustawieniami konfiguracyjnymi, aby uniknąć typowych niezgodności kodu i różnice:
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 .