Czysty kod: dlaczego podstawowe elementy HTML/CSS nadal mają znaczenie

Podczas mojego 15-letniego doświadczenia w tworzeniu stron internetowych pracowałem z różnymi firmami, od poziomu korporacyjnego po start-upy, a po drodze współpracowałem z wieloma innymi inżynierami oprogramowania. Jednym z najczęstszych i najważniejszych problemów, na jakie natknąłem się w moich projektach, jest nieumiejętność napisania czystego i łatwego do zrozumienia kodu .

Nawet najlepsi programiści z czołowych firm nie zawsze stosują się do najlepszych praktyk i piszą kod, który można wyczyścić i zoptymalizować.

Konsekwencje niechlujnego i brudnego kodu

Cytując stary, ale wciąż aktualny wpis na blogu omawiający zasady czystego kodu:

Kod źródłowy jest podobny do długu finansowego. Załóżmy, że chcesz kupić dom do zamieszkania. Większość ludzi nie ma środków na opłacenie domu, więc zamiast tego bierzesz kredyt hipoteczny. Ale sam kredyt hipoteczny nie jest dobrą rzeczą. To odpowiedzialność. Musisz co miesiąc spłacać odsetki od zadłużenia…

Tak też w tworzeniu stron internetowych. Kod ma stałe koszty. Musisz to zrozumieć, musisz to utrzymać, musisz z czasem dostosowywać do nowych celów. Im więcej masz kodu, tym większe będą koszty bieżące. W naszym najlepszym interesie jest posiadanie jak najmniejszej ilości kodu źródłowego, a jednocześnie możliwość realizacji naszych celów biznesowych.

Ale nie rozpamiętujmy abstrakcji. W tym artykule omówimy podstawowe zasady czystego kodu, różne techniki używane do organizowania kodu oraz sposoby, aby był łatwiejszy w utrzymaniu, skalowalny i łatwiejszy do debugowania.

Kod wysokiej jakości zaczyna się od podstawowego stylu kodu, rozszerzając się na najlepsze praktyki podczas pisania dużych aplikacji w HTML/CSS z wieloma blokami wielokrotnego użytku, a także omówimy konwencje nazewnictwa, aby stworzyć większą niejawną czytelność, a także frameworki innych firm i ich najlepsze praktyki.

Zanim skończysz czytać, powinieneś dobrze rozumieć podstawy kodu wysokiej jakości oraz tego, jak ułatwić utrzymanie i rozszerzanie kodu HTML i CSS.

Podstawy stylizacji kodu

Zacznijmy od podstaw dobrego kodu HTML i CSS: ważność W3C, konwencje nazewnictwa, struktura plików i tak dalej.

Uważaj na strukturę od pierwszego dnia.

Jeśli zamierzasz stworzyć dużą aplikację, musisz zadbać o strukturę plików. Może, a raczej powinien wyglądać tak:

Użyj walidatorów, aby sprawdzić swój kod.

Staraj się zawsze używać walidatorów HTML i CSS.

Zły kod:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Dobry kod:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Użyj tekstu alternatywnego w tagach <img> , aby zapewnić poprawność zasad czystego kodu.

Ten atrybut odgrywa kluczową rolę dla SEO, wyszukiwarek, robotów indeksujących, czytników ekranu itp.

Zły kod:

 <img src="demo.jpg">

Dobry kod:

 <img src="demo.jpg" alt="This is placeholder of the image">

Użyj kebab-case (spinal-case).

W przypadku nazw spróbuj użyć kebab-case ( spinal-case ) i nie używaj camelCase ani under_score . Użyj under_score tylko podczas korzystania z BEM, chociaż jeśli używasz Bootstrap, lepiej zachować spójność i stosować - jako ogranicznik.

Zły kod:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Dobry kod:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case jest bardziej czytelny niż camelCase i under_score .

Używaj znaczących nazw, które mogą być zrozumiane przez każdego, staraj się, aby były krótkie.

Nazwy klas powinny wyglądać jak .noun-adjective .

Staraj się używać wspólnych nazw klas zamiast pisać konkretne nazwy treści. Sprawia, że ​​kod jest bardziej czytelny

Zły kod:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Dobry kod:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

Nie pisz atrybutów typu dla arkuszy stylów i skryptów w HTML5.

Nie są wymagane w HTML5, ale są wymagane przez standardy W3C w HTML4/XHTML.

Zły kod:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Dobry kod:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

W razie potrzeby używaj określonych klas.

Zachowaj bardziej szczegółowy selektor CSS i wybierz potrzebne elementy; spróbuj nie wspominać o ich rodzicach, jeśli nie jest to konieczne. Pozwoli to na szybsze renderowanie kodu i usunięcie wszelkich przeszkód w zarządzaniu w przyszłości

Zły kod:

 section aside h1 span { margin-left: 25%; }

Dobry kod:

 .left-offset { margin-left: 25%; }

Chociaż zastosowanie klasy do elementu docelowego może utworzyć więcej kodu w HTML, pozwoli to na szybsze renderowanie kodu i usunie wszelkie przeszkody w zarządzaniu.

Dodaj klasę do elementu nadrzędnego, jeśli chcesz nadać temu samemu blokowi inny styl.

Jeśli potrzebujesz użyć tego samego bloku, ale z różnymi stylami, postaraj się, aby kod HTML był jak najbardziej nietknięty. Po prostu dodaj jedną klasę do elementu nadrzędnego i zastosuj wszystkie nowe stylizacje do dzieci tej klasy w CSS.

Zły kod:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Dobry kod:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Upuść jednostki od wartości zerowych.

Dodanie jednostki jest niepotrzebne i nie zapewnia żadnej dodatkowej wartości. Nie ma różnicy między 0px, 0em, 0% lub jakąkolwiek inną wartością zerową. Jednostki nie są ważne, ponieważ wartość nadal wynosi zero.

Zły kod:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Dobry kod:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Nie pisz border-bottom w CSS, jeśli możesz dodać tag hr .

Użyj tagu hr zamiast pisać nowy selektor i dodawać style obramowania w CSS. Sprawia, że ​​kod jest bardziej oparty na znacznikach i właśnie do tego dążymy.

Zły kod:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Dobry kod:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Użyj selektora A > B.

Bardzo pomocne jest użycie selektora A > B , który stosuje reguły tylko do bezpośredniego dziecka (dzieci), w takim przypadku nie będziesz musiał resetować stylów wszystkich innych dzieci, które nie potrzebują tego stylu. Na przykład jest to bardzo przydatne podczas kodowania zagnieżdżonych menu. Nie będziesz musiał ponownie definiować stylów podmenu.

Zły kod:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Dobry kod:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Jak pisać czysty HTML

Przechodząc do HTML, priorytetem będzie zapewnienie solidnego i łatwego w utrzymaniu interfejsu.

Staraj się mieć front-end, który jest jak najbardziej oparty na znacznikach.

Spraw, aby Twój kod front-endowy był oparty na znacznikach, zamiast pisać za dużo CSS.

Pomoże to wyszukiwarkom i zwiększy czytelność kodu, potencjalnie poprawiając rankingi wyszukiwania i wrażenia użytkownika.

Zły kod:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Dobry kod:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Unikaj używania zbędnych opakowań w HTML.

Staraj się nie używać zbędnych elementów opakowujących w HTML. Posiadanie ton elementów <div> i <span> to już przeszłość. Utrzymywanie ziarnistości i linearności umożliwia uzyskanie minimalnego kodu (patrz następny punkt).

Zły kod:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Dobry kod:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Użyj klas atomowych do stylizacji.

Nie używaj żadnych niestandardowych kolorów ani rozmiarów czcionek (jeśli kolor lub rozmiar czcionki nie jest uwzględniony w strukturze, po prostu dodaj swoje klasy atomowe). Klasy atomowe to proste, jednofunkcyjne jednostki stylizacji. Podobnie jak style wbudowane, style Atomic stosują tylko jedną deklarację stylu.

Zły kod:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Dobry kod:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Staraj się zachować klasy granularne i atomowe i używaj ich w razie potrzeby. W rezultacie Twój front-end stanie się bardziej oparty na znacznikach.

Wykorzystaj elementy semantyczne.

Korzystanie z semantyki zapewnia lepszą strukturę i sprawia, że ​​kod i treść są łatwiejsze do odczytania.

Zły kod:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Dobry kod:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Użyj tagów HTML5.

Nowe tagi dają większą swobodę ekspresji i standaryzację wspólnych elementów, co usprawnia zautomatyzowane przetwarzanie dokumentów. Oto pełna lista wszystkich elementów. Odkryłem, że wielu programistów zawsze używa dużo <div> i <span> , ale najpierw sprawdź tutaj, które tagi pasują logicznie do twojego kontekstu:

Zły kod:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Dobry kod:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Konkluzja: poznaj i używaj nowych elementów w HTML5. To jest warte wysiłku!

CSS: czysty kod i preprocesory

Jeśli chodzi o CSS, trudno nie zacząć od jakiejś nieoryginalnej, ale bezczelnej rady:

Użyj preprocesora CSS.

Sass jest najbardziej dojrzałym, stabilnym i potężnym językiem rozszerzeń CSS klasy profesjonalnej na świecie.

Sass ma dwie składnie. Pierwszy, znany jako SCSS (Sassy CSS) i używany w tym dokumencie, jest rozszerzeniem składni CSS. Druga i starsza składnia, znana jako składnia z wcięciem (lub czasami po prostu „Sass”), zapewnia bardziej zwięzły sposób pisania CSS.

Pogrupuj swoje selektory: użyj @extend w SASS.

Grupując swoje selektory lub używając @extend w SASS, powinieneś pomóc utrzymać swój kod w stanie suchym (nie powtarzaj się).

Zły kod:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Dobry kod:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Używaj jednostek rem zamiast pikseli w CSS.

Użyj REM dla rozmiarów i odstępów, na przykład rozmiarów czcionek, które tworzy na podstawie font-size głównego elementu <html> . Pozwalają również na szybkie skalowanie całego projektu poprzez zmianę głównego rozmiaru czcionki (na przykład przy określonym zapytaniu o media/rozmiarze ekranu).

Będziesz pisać mniej kodu dla widoków responsywnych:

Zły kod:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Dobry kod:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Staraj się unikać stałej wysokości lub szerokości w CSS.

Staraj się unikać stałej wysokości lub szerokości w CSS. Wysokości można generować poprzez posiadanie zawartości wewnętrznej + wyściółki, a szerokości można zdefiniować za pomocą systemu siatek (w razie potrzeby użyj siatki zagnieżdżonej).

Zły kod:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Dobry kod:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Pamiętaj, aby użyć elementu nadrzędnego tylko raz w SCSS.

Kiedy używasz preprocesora CSS i planujesz napisać stylizację dla dowolnej sekcji, pamiętaj, aby użyć elementu nadrzędnego w CSS tylko raz i umieścić wszystkie elementy podrzędne i zapytania o media w jego nawiasach. Umożliwi to łatwe znajdowanie i modyfikowanie głównego elementu nadrzędnego w jednym miejscu podczas dokonywania zmian w przyszłości.

Zły kod:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Dobry kod:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Zastanów się, które elementy zostaną zmienione, zanim napiszesz regułę CSS.

Zawsze zastanów się, które elementy zostaną zmienione przed napisaniem jakiejkolwiek reguły CSS. Jeśli twoje zmiany nie będą powszechne, napisz swoje zasady w taki sposób, aby wpływały tylko na określony element i nic więcej.

Zły kod:

 /* Commonly used class */ .title { color: #008000; }

Dobry kod:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Spróbuj poszukać istniejących reguł i zmiennych CSS przed napisaniem nowych.

Zawsze szukaj istniejących reguł, które pasują do pożądanego stylu, zarówno w niestandardowym CSS, jak i we frameworku. Tylko jeśli nie ma nic odpowiedniego, przystąp do pisania nowego.

Jest to szczególnie ważne podczas pracy z dużymi aplikacjami.

Zły kod:

 .jumbotron { margin-bottom: 20px; }

Dobry kod:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Użyj określonych zasad.

Jeśli tło ma jedną właściwość, określamy tę właściwość, ale jeśli ma inne właściwości tła, możemy nadać mu jedną deklarację.

Zły kod:

 .selector { background: #fff; }

Dobry kod:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Używaj skróconych właściwości i wartości.

Postaraj się wykorzystać więcej skróconych właściwości i wartości. Używając skróconej właściwości, możesz pisać zwięzłe i często znacznie bardziej czytelne arkusze stylów, oszczędzając cenny czas i energię.

Zły kod:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Dobry kod:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Użyj em zamiast px dla wysokości linii.

Korzystanie z jednostek em i px daje nam elastyczność w naszych projektach i możliwość skalowania elementów w górę iw dół, zamiast przyklejania się do stałych rozmiarów. Możemy wykorzystać tę elastyczność, aby nasze projekty były łatwiejsze do dostosowania podczas opracowywania i bardziej responsywne, a także umożliwić użytkownikom przeglądarek kontrolowanie ogólnej skali witryn w celu uzyskania maksymalnej czytelności.

Zły kod:

 p { font-size: 12px; line-height: 24px; }

Dobry kod:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Używaj klas Bootstrap tak często, jak to możliwe.

Chociaż ta zasada może dotyczyć ogólnie frameworków UI, używam jako przykładu Bootstrap, ponieważ jest to najpopularniejsza na świecie biblioteka komponentów front-end.

Bootstrap pozwala na korzystanie z wielu gotowych klas, ułatwiając pracę. Staraj się używać klas Bootstrap tak często, jak to możliwe, aby tworzyć więcej znaczników opartych na HTML.

Zły kod:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Dobry kod:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Odpowiednio dostosuj swój framework.

Bootstrap opiera się na pliku sources.scss, który umożliwia łatwą konfigurację i dostosowanie interfejsu użytkownika bez pisania ani jednej linii kodu. W przeciwnym razie, jeśli zamierzasz samodzielnie napisać wszystkie dostosowania, lepiej w ogóle nie używać frameworka.

Niektórzy programiści unikają zmiany pliku variable.scss, myśląc, że nadal będą mogli zaktualizować Bootstrap do nowej wersji bez większych problemów, ale może to być żmudne zadanie. Nawet drobne aktualizacje wymagają od programistów przeczytania dziennika zmian, przejrzenia wszystkich znaczników i CSS oraz ręcznej migracji do nowej wersji.

Zły kod:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Dobry kod:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

Nie nadpisuj .container width.

Staraj się nie nadpisywać szerokości .container . Spróbuj zamiast tego użyć systemu siatki lub po prostu zmień szerokość kontenera w _variables.scss . Jeśli chcesz zmniejszyć jego szerokość, po prostu użyj max-width zamiast width. W takim przypadku .container z Bootstrap pozostanie nietknięty w widokach responsywnych.

Zły kod:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Dobry kod:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Używaj klas Bootstrap 4 i pisz mniej CSS.

Zacznij korzystać z Bootstrap 4, nawet jeśli jest w wersji beta. Zawiera wiele nowych klas, które pomogą Ci szybciej tworzyć układy, zwłaszcza Flexbox i przekładki.

Zły kod:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Dobry kod:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Teraz możemy przypisać klasy do elementu, aby usunąć wszystkie obramowania lub niektóre obramowania.

Zły kod:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Dobry kod:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Użyj .col-sm-X , jeśli .col-md-X i .col-lg-X mają taką samą wartość dla X.

Nie pisz .col-md-X i .col-lg-X , jeśli .col-sm-X ma taką samą wartość dla X. Na przykład nie ma potrzeby pisania .col-lg-10 , ponieważ kiedy piszemy .col-md-10 , automatycznie dołączamy do niego .col-lg-10 .

Zły kod:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Dobry kod:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Nie używaj .col-xs-12 .

Nie używaj .col-xs-12 , ponieważ jeśli nie przypisano żadnego .col-xs-X , domyślnie będzie to .col-xs-12 .

Zły kod:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Dobry kod:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Nie używaj reset.css ; zamiast tego użyj normalize.css .

Jeśli korzystasz z Bootstrapa, plik normalize.css jest już tam zawarty, nie ma potrzeby dołączania go dwukrotnie.

Postępuj zgodnie z wytycznymi, nawet jeśli nie są to najlepsze praktyki.

Ze względu na spójność lepiej zawsze przestrzegać zasad i wytycznych, od których zacząłeś (niezależnie od tego, czy dotyczą nazewnictwa, stylu kodu, czy struktury plików)

Zawijanie

Mam nadzieję, że udało Ci się zabrać coś przydatnego i że zastanowisz się więcej nad pisaniem minimalnego kodu HTML i CSS z najlepszymi praktykami.

W przypadku dużych firm utrzymanie dużych aplikacji jest dość trudne, gdy występuje bałagan w kodzie. I oczywiście duże firmy mają pieniądze, by zapłacić za dobrą jakość. Jeśli będziesz przestrzegać zasad czystego kodowania, zwiększysz swoje szanse na zdobycie dobrej pracy. Warto również poruszyć aspekt freelancerów: profesjonaliści żonglujący wieloma projektami i klientami muszą dostarczać czysty kod , który można przekazać innym programistom w mgnieniu oka.

Mam nadzieję, że w przyszłych wpisach poszerzę się o bardziej zaawansowane tematy, ponieważ zamierzam porozmawiać o automatyzacji procesu kodowania za pomocą zadań Gulp/Grunt, Linters, wtyczek Editor, narzędzi generujących kod, narzędzi AI, które piszą kod za Ciebie i innych powiązane tematy.

Mam nadzieję, że była to ciekawa i pouczająca lektura. Powodzenia w programowaniu.

Dalsza lektura na blogu Toptal Engineering:

• Jak podejść do animacji SVG w CSS