Cod curat: de ce elementele esențiale HTML/CSS încă contează

Pe parcursul celor 15 ani de experiență în dezvoltarea web, am lucrat cu diverse companii, de la nivel de întreprindere până la startup-uri, și am lucrat cu mulți, mulți colegi ingineri de software pe parcurs. Una dintre cele mai comune și importante probleme pe care le-am întâlnit în proiectele mele a fost eșecul de a scrie cod curat și ușor de înțeles .

Chiar și cei mai buni dezvoltatori de la companii de top nu urmează întotdeauna cele mai bune practici și nu scriu cod care poate fi curățat și optimizat.

Consecințele codului dezordonat și murdar

Pentru a cita o postare de blog veche, dar încă relevantă, care discută despre principiile codului curat:

Codul sursă este asemănător cu datoria financiară. Să presupunem că doriți să cumpărați o casă în care să locuiți. Majoritatea oamenilor nu au mijloacele financiare pentru a plăti în numerar pentru o casă, așa că în schimb luați un credit ipotecar. Dar ipoteca în sine nu este un lucru grozav. Este o răspundere. Trebuie să plătești dobândă pentru datoria ta în fiecare lună...

La fel și în dezvoltarea web. Codul are costuri continue. Trebuie să o înțelegi, trebuie să o menții, trebuie să o adaptezi la noi obiective în timp. Cu cât aveți mai mult cod, cu atât costurile continue vor fi mai mari. Este în interesul nostru să avem cât mai puțin cod sursă posibil, în timp ce ne putem îndeplini obiectivele de afaceri.

Dar să nu ne oprim pe abstract. Acest articol va acoperi principiile esențiale ale codului curat, diferite tehnici utilizate pentru organizarea codului și cum să îl faceți mai ușor de întreținut, scalabil și mai ușor de depanat.

Codul de calitate începe cu stilul de bază al codului, extinzându-se la cele mai bune practici atunci când scrieți aplicații mari în HTML/CSS cu multe blocuri reutilizabile și vom discuta, de asemenea, convențiile de denumire pentru a crea o mai mare lizibilitate implicită, precum și cadrele terțe și cele mai bune practici ale acestora.

Până când ai terminat de citit, ar trebui să înțelegi bine elementele de bază ale codului de calitate și cum să faci codul HTML și CSS mai ușor de întreținut și extins.

Elemente esențiale pentru stilul codului

Să începem cu elementele de bază ale codului HTML și CSS bun: validitatea W3C, convențiile de denumire, structura fișierelor și așa mai departe.

Fii atent la structura din prima zi.

Dacă intenționați să dezvoltați o aplicație mare, atunci trebuie să aveți grijă de structura fișierului. Poate sau mai degrabă ar trebui să arate astfel:

Utilizați validatori pentru a vă verifica codul.

Încercați să utilizați întotdeauna validatoare HTML și CSS.

Cod prost:

 <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; }

Cod bun:

 <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; }

Utilizați text alternativ pe etichetele <img> pentru valabilitatea principiilor codului curat.

Acest atribut joacă un rol vital pentru SEO, motoarele de căutare, crawlerele web, cititoarele de ecran etc.

Cod prost:

 <img src="demo.jpg">

Cod bun:

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

Folosiți kebab-case (spinal-case).

Pentru nume, încercați să folosiți kebab-case ( spinal-case ) și nu folosiți camelCase , sau under_score . Utilizați under_score numai când utilizați BEM, deși dacă utilizați Bootstrap, este mai bine să păstrați consecvența și să mergeți cu - ca delimitator.

Cod prost:

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

Cod bun:

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

kebab-case este mai lizibil decât camelCase și under_score .

Folosiți nume semnificative care pot fi înțelese de oricine, păstrați-le scurte.

Numele claselor ar trebui să arate ca .noun-adjective .

Încercați să utilizați nume comune ale claselor în loc să scrieți nume specifice conținutului. Face codul mai lizibil

Cod prost:

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

Cod bun:

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

Nu scrieți atribute de tip pentru foile de stil și scripturi în HTML5.

Nu sunt necesare cu HTML5, dar sunt cerute de standardele W3C în HTML4/XHTML.

Cod prost:

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

Cod bun:

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

Folosiți clase specifice atunci când este necesar.

Păstrați selectorul CSS mai specific și selectați elementele de care aveți nevoie; încercați să nu-și menționați părinții dacă nu este necesar. Acesta va permite redarea mai rapidă a codului și va elimina orice obstacole de gestionare în viitor

Cod prost:

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

Cod bun:

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

În timp ce aplicarea unei clase la elementul vizat poate crea mai mult cod în HTML, aceasta va permite codului să fie redat mai rapid și va elimina orice obstacole de gestionare.

Adăugați o clasă la elementul părinte dacă doriți să dați un alt stil aceluiași bloc.

Dacă trebuie să utilizați același bloc, dar cu stiluri diferite, încercați să păstrați HTML-ul cât mai neatins posibil. Doar adăugați o clasă la elementul părinte și aplicați toate stilurile noi copiilor din acea clasă în CSS.

Cod prost:

 <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; }

Cod bun:

 <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; } } }

Eliminați unitățile de la valori zero.

Adăugarea unității este inutilă și nu oferă valoare suplimentară. Nu există nicio diferență între 0px, 0em, 0% sau orice altă valoare zero. Unitățile nu sunt importante pentru că valoarea este încă zero.

Cod prost:

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

Cod bun:

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

Nu scrieți border-bottom în CSS dacă puteți adăuga o etichetă hr .

Utilizați eticheta hr în loc să scrieți un nou selector și să adăugați stiluri de chenar în CSS. Face codul mai bazat pe markup și asta este ceea ce ne propunem.

Cod prost:

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

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

Cod bun:

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

Folosiți selectorul A > B.

Este foarte util să folosiți selectorul A > B , care aplică reguli doar copiilor direcționați, în acest caz nu va trebui să resetați stilurile tuturor celorlalți copii care nu au nevoie de acel stil. De exemplu, este foarte util la codificarea meniurilor imbricate. Nu va trebui să redefiniți stilurile submeniului.

Cod prost:

 <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; }

Cod bun:

 <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; }

Cum se scrie HTML curat

Trecând la HTML, prioritatea va fi asigurarea unui front-end robust și ușor de întreținut.

Încercați să aveți un front-end care să fie cât mai bazat pe markup.

Faceți-vă codul front-end bazat pe marcaj, în loc să scrieți prea mult CSS.

Acest lucru va ajuta motoarele de căutare și va face codul dvs. mai lizibil, potențial îmbunătățind clasamentele de căutare și experiența utilizatorului.

Cod prost:

 <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>

Cod bun:

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

Evitați utilizarea wrapper-urilor inutile în HTML.

Încercați să nu utilizați elemente de wrapper inutile în HTML. A avea tone de tone de elemente <div> și <span> este un lucru al trecutului. Păstrarea lucrurilor granulare și liniare vă permite să obțineți cod minim (vezi punctul următor).

Cod prost:

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

Cod bun:

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

Folosiți clase atomice pentru stil.

Nu utilizați culori personalizate sau dimensiuni de font (dacă culoarea sau dimensiunea fontului nu sunt în cadru, adăugați doar clasele dvs. atomice). Clasele atomice sunt unități de stil simple, cu un singur scop. La fel ca stilurile inline, stilurile atomice aplică doar o singură declarație de stil.

Cod prost:

 <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; }

Cod bun:

 <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; }

Încercați să păstrați clasele granulare și atomice și să le folosiți atunci când este necesar. Ca rezultat, front-end-ul dvs. va deveni mai bazat pe markup.

Folosește elemente semantice.

Utilizarea semanticii oferă o structură mai bună și face codul și conținutul mai ușor de citit.

Cod prost:

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

Cod bun:

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

Utilizați etichete HTML5.

Noile etichete vă oferă mai multă libertate de expresie și de a standardiza elementele comune, ceea ce îmbunătățește procesarea automată a documentelor. Iată o listă solidă a tuturor elementelor. Am descoperit că mulți dezvoltatori folosesc întotdeauna multe <div> și <span> , dar mai întâi vă rugăm să verificați aici ce etichete se potrivesc logic în contextul dvs.:

Cod prost:

 <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>

Cod bun:

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

Concluzie: învață și folosește elemente noi în HTML5. Merită din plin efortul!

CSS: Cod curat și preprocesoare

Când vine vorba de CSS, este greu să nu începi cu niște sfaturi neoriginale, dar neplăcute:

Utilizați un preprocesor CSS.

Sass este cel mai matur, stabil și puternic limbaj de extensie CSS de grad profesional din lume.

Există două sintaxe disponibile pentru Sass. Primul, cunoscut sub numele de SCSS (Sassy CSS) și folosit în această referință, este o extensie a sintaxei CSS. A doua sintaxă și mai veche, cunoscută sub numele de sintaxă indentată (sau uneori doar „Sass”), oferă un mod mai concis de a scrie CSS.

Grupați-vă selectatorii: utilizați @extend în SASS.

Prin gruparea selectoarelor sau folosind @extend în SASS, ar trebui să contribuiți la menținerea codului DRY (Nu vă repetați).

Cod prost:

 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; }

Cod bun:

 .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; }

Folosiți unități rem în loc de pixeli în CSS.

Utilizați REM-uri pentru dimensiuni și spații, de exemplu dimensiunile fonturilor pe care le face pe baza font-size elementului rădăcină <html> . De asemenea, vă permit să scalați rapid un întreg proiect prin modificarea dimensiunii fontului rădăcină (de exemplu, la o anumită interogare media/dimensiune ecran).

Veți scrie mai puțin cod pentru vizualizările receptive:

Cod prost:

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

Cod bun:

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

Încercați să evitați să aveți înălțime sau lățime fixă ​​în CSS.

Încercați să evitați să aveți înălțime sau lățime fixă ​​în CSS. Înălțimile pot fi generate având conținut interior + umplutură, iar lățimile pot fi definite printr-un sistem de grilă (folosește grila imbricată dacă este necesar).

Cod prost:

 <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; }

Cod bun:

 <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; }

Asigurați-vă că utilizați elementul părinte o singură dată în SCSS.

Când utilizați un preprocesor CSS și intenționați să scrieți stilul pentru orice secțiune, asigurați-vă că utilizați elementul părinte în CSS o singură dată și includeți toate elementele secundare și interogările media între paranteze. Acest lucru vă va permite să găsiți și să modificați cu ușurință elementul părinte principal într-un singur loc atunci când faceți modificări în viitor.

Cod prost:

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

Cod bun:

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

Gândiți-vă ce elemente vor fi afectate înainte de a scrie o regulă CSS.

Gândiți-vă întotdeauna la ce elemente vor fi afectate înainte de a scrie orice regulă CSS. Dacă modificările tale nu vor fi comune, atunci scrie-ți regulile astfel încât să afecteze doar un anumit element și nimic altceva.

Cod prost:

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

Cod bun:

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

Încercați să căutați regulile și variabilele CSS existente înainte de a scrie altele noi.

Căutați întotdeauna regulile existente care se potrivesc stilului dorit, atât în ​​CSS personalizat, cât și în cadru. Numai dacă nu este nimic adecvat, treceți la scrierea unuia nou.

Acest lucru este deosebit de important atunci când lucrați cu aplicații mari.

Cod prost:

 .jumbotron { margin-bottom: 20px; }

Cod bun:

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

Folosiți reguli specifice.

Dacă fundalul are o singură proprietate, specificăm acea proprietate, dar dacă are proprietăți de fundal diferite, îi putem da o singură declarație.

Cod prost:

 .selector { background: #fff; }

Cod bun:

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

Folosiți proprietăți și valori scurte.

Faceți tot posibilul să utilizați mai multe proprietăți și valori scurte. Folosind o proprietate stenografică, puteți scrie foi de stil concise și, de cele mai multe ori, mult mai lizibile, economisind timp și energie prețios.

Cod prost:

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

Cod bun:

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

Utilizați em în loc de px pentru înălțimea liniei.

Utilizarea unităților em și px ne oferă flexibilitate în designul nostru și capacitatea de a scala elementele în sus și în jos, în loc să rămânem blocați cu dimensiuni fixe. Putem folosi această flexibilitate pentru a face modelele noastre mai ușor de ajustat în timpul dezvoltării și mai receptive, precum și pentru a permite utilizatorilor browserului să controleze scara generală a site-urilor pentru o lizibilitate maximă.

Cod prost:

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

Cod bun:

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

Folosiți cât mai mult posibil clasele Bootstrap.

Deși această regulă s-ar putea aplica cadrelor UI în general, folosesc Bootstrap ca exemplu, deoarece este cea mai populară bibliotecă de componente front-end din lume.

Bootstrap vă permite să utilizați o mulțime de cursuri pregătite, ușurând munca. Încercați să utilizați clasele Bootstrap cât mai mult posibil, pentru a face mai mult marcare bazată pe HTML.

Cod prost:

 <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; } ...

Cod bun:

 <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>

Personalizați-vă cadrul corespunzător.

Bootstrap se bazează pe fișierul variables.scss, care vă permite să configurați și să personalizați cu ușurință front-end-ul fără a scrie o singură linie de cod. În caz contrar, dacă ai de gând să scrii manual toate personalizările pe cont propriu, ar fi mai bine să nu folosești deloc un cadru.

Unii dezvoltatori evită să schimbe variables.scss, crezând că vor putea în continuare să actualizeze Bootstrap la o versiune nouă fără prea multe bătăi de cap, dar poate fi o sarcină plictisitoare. Chiar și actualizările minore impun dezvoltatorilor să citească jurnalul de modificări, să treacă prin toate markupurile și CSS și să migreze la noua versiune manual.

Cod prost:

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

Cod bun:

 $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;

Nu suprascrieți .container .

Încercați să nu suprascrieți lățimea .container . Încercați să utilizați în schimb un sistem de grilă sau doar modificați lățimea containerului în _variables.scss . Dacă trebuie să-i micșorați lățimea, utilizați doar lățime maximă în loc de lățime. În acest caz, .container de la Bootstrap va rămâne neatins în vizualizările receptive.

Cod prost:

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

Cod bun:

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

Utilizați clasele Bootstrap 4 și scrieți mai puțin CSS.

Începeți să utilizați Bootstrap 4, chiar dacă este în versiune beta. Include multe clase noi care vă vor ajuta să creați machete mai rapid, în special Flexbox și distanțiere.

Cod prost:

 <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; } }

Cod bun:

 <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>

Acum putem atribui clase unui element pentru a elimina toate marginile sau unele margini.

Cod prost:

 <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; } } }

Cod bun:

 <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; } }

Utilizați .col-sm-X dacă .col-md-X și .col-lg-X au aceeași valoare pentru X.

Nu scrieți .col-md-X și .col-lg-X dacă .col-sm-X are aceeași valoare pentru X. De exemplu, nu este nevoie să scrieți .col-lg-10 pentru că atunci când scriem .col-md-10 , includem automat .col-lg-10 în el.

Cod prost:

 <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>

Cod bun:

 <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>

Nu utilizați .col-xs-12 .

Nu utilizați .col-xs-12 deoarece dacă nu este atribuit niciun .col-xs-X , atunci acesta va fi .col-xs-12 în mod implicit.

Cod prost:

 <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>

Cod bun:

 <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>

Nu utilizați reset.css ; utilizați în schimb normalize.css .

Dacă utilizați Bootstrap, atunci normalize.css este deja inclus acolo, nu este nevoie să îl includeți de două ori.

Urmați instrucțiunile, chiar dacă nu sunt o practică optimă.

Din motive de consecvență, este mai bine să urmați întotdeauna regulile și liniile directoare cu care ați început (fie că sunt despre denumire, stil de cod sau structură de fișiere)

Încheierea

Sper că ați reușit să luați ceva util și că vă veți gândi mai mult la scrierea unui cod HTML și CSS minim cu cele mai bune practici.

Pentru companiile mari, este destul de dificil să întreținem aplicații mari atunci când există cod dezordonat. Și, desigur, marile companii au bani să plătească pentru calitate bună. Dacă urmați principiile de codificare curată, vă veți îmbunătăți șansele de a obține un loc de muncă bun. De asemenea, merită să aducem în discuție aspectul freelance: profesioniștii care jonglează cu mai multe proiecte și clienții trebuie să livreze cod curat care poate fi transmis altor dezvoltatori în cel mai scurt timp.

Sper să mă extind la subiecte mai avansate în postările viitoare, deoarece intenționez să vorbesc despre automatizarea procesului de codare, folosind sarcini Gulp/Grunt, Linters, plugin-uri Editor, instrumente care generează cod, instrumente AI care scriu cod în locul tău și alte subiecte asemănătoare.

Sper că aceasta a fost o lectură interesantă și informativă. Mult succes în eforturile tale de codificare.

Citiți suplimentare pe blogul Toptal Engineering:

• Cum să abordați animațiile SVG în CSS