Codice pulito: perché gli elementi essenziali HTML/CSS sono ancora importanti

Durante i miei 15 anni di esperienza nello sviluppo web, ho lavorato con varie aziende, dal livello aziendale alle startup, e ho lavorato con molti, molti colleghi ingegneri del software lungo il percorso. Uno dei problemi più comuni e importanti che ho riscontrato nei miei progetti è stato l'incapacità di scrivere codice pulito e di facile comprensione .

Anche i migliori sviluppatori di aziende di prim'ordine non sempre seguono le migliori pratiche e scrivono codice che può essere pulito e ottimizzato.

Le conseguenze del codice disordinato e sporco

Per citare un post sul blog vecchio ma ancora rilevante che discute i principi del codice pulito:

Il codice sorgente è simile al debito finanziario. Supponiamo che tu voglia comprare una casa in cui vivere. La maggior parte delle persone non ha i mezzi finanziari per pagare in contanti una casa, quindi accendi invece un mutuo. Ma il mutuo in sé non è una grande cosa da avere. È una responsabilità. Devi pagare gli interessi sul tuo debito ogni mese...

Così anche nello sviluppo web. Il codice ha costi correnti. Devi capirlo, devi mantenerlo, devi adattarlo a nuovi obiettivi nel tempo. Più codice hai, maggiori saranno i costi correnti. È nel nostro interesse avere il minor numero possibile di codice sorgente pur essendo in grado di raggiungere i nostri obiettivi aziendali.

Ma non soffermiamoci sull'astratto. Questo articolo tratterà i principi essenziali del codice pulito, le diverse tecniche utilizzate per organizzare il codice e come renderlo più gestibile, scalabile e più facile da eseguire il debug.

Il codice di qualità inizia con lo stile del codice di base, espandendosi alle procedure consigliate durante la scrittura di app di grandi dimensioni in HTML/CSS con molti blocchi riutilizzabili e discuteremo anche le convenzioni di denominazione per creare una maggiore leggibilità implicita, nonché i framework di terze parti e le relative procedure consigliate.

Al termine della lettura, dovresti avere una buona comprensione delle basi del codice di qualità e di come semplificare la manutenzione e l'estensione del codice HTML e CSS.

Elementi essenziali per lo styling del codice

Cominciamo con le basi di un buon codice HTML e CSS: validità W3C, convenzioni di denominazione, struttura dei file e così via.

Sii consapevole della struttura sin dal primo giorno.

Se hai intenzione di sviluppare una grande app, devi occuparti della struttura dei file. Può, o meglio dovrebbe, assomigliare a questo:

Usa i validatori per controllare il tuo codice.

Cerca di utilizzare sempre validatori HTML e CSS.

Codice errato:

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

Buon codice:

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

Usa testo alternativo sui tag <img> per la validità dei principi del codice pulito.

Questo attributo svolge un ruolo fondamentale per SEO, motori di ricerca, web crawler, screen reader, ecc.

Codice errato:

 <img src="demo.jpg">

Buon codice:

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

Usa la custodia per kebab (custodia spinale).

Per i nomi, prova a usare kebab-case ( spinal-case ) e non camelCase o under_score . Usa under_score solo quando usi BEM, anche se se stai usando Bootstrap, è meglio mantenere la coerenza e utilizzare - come delimitatore.

Codice errato:

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

Buon codice:

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

kebab-case è più leggibile camelCase e under_score .

Usa nomi significativi che possano essere compresi da chiunque, mantienili brevi.

I nomi delle classi dovrebbero assomigliare a .noun-adjective .

Prova a usare nomi comuni delle classi invece di scrivere nomi specifici del contenuto. Rende il codice più leggibile

Codice errato:

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

Buon codice:

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

Non scrivere attributi di tipo per fogli di stile e script in HTML5.

Non sono richiesti con HTML5, ma sono richiesti dagli standard W3C in HTML4/XHTML.

Codice errato:

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

Buon codice:

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

Utilizzare classi specifiche quando necessario.

Mantieni il selettore CSS più specifico e seleziona gli elementi di cui hai bisogno; cerca di non menzionare i loro genitori se non necessario. Consentirà al codice di eseguire il rendering più velocemente e rimuovere eventuali ostacoli di gestione in futuro

Codice errato:

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

Buon codice:

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

Sebbene l'applicazione di una classe all'elemento di destinazione possa creare più codice all'interno dell'HTML, consentirà al codice di eseguire il rendering più velocemente e rimuoverà eventuali ostacoli di gestione.

Aggiungi una classe all'elemento genitore se vuoi dare un altro stile allo stesso blocco.

Se devi utilizzare lo stesso blocco ma con uno stile diverso, cerca di mantenere l'HTML il più intatto possibile. Basta aggiungere una classe all'elemento genitore e applicare tutti i nuovi stili ai figli di quella classe in CSS.

Codice errato:

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

Buon codice:

 <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 le unità da zero.

L'aggiunta dell'unità non è necessaria e non fornisce alcun valore aggiuntivo. Non c'è differenza tra 0px, 0em, 0% o qualsiasi altro valore zero. Le unità non sono importanti perché il valore è ancora zero.

Codice errato:

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

Buon codice:

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

Non scrivere border-bottom in CSS se puoi aggiungere un tag hr .

Usa il tag hr invece di scrivere un nuovo selettore e aggiungere stili di bordo in CSS. Rende il codice più basato sul markup ed è quello che stiamo cercando.

Codice errato:

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

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

Buon codice:

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

Utilizzare il selettore A > B.

È molto utile usare il selettore A > B , che applica le regole solo ai bambini diretti, in tal caso non dovrai ripristinare gli stili di tutti gli altri bambini che non hanno bisogno di quello stile. Ad esempio, è molto utile quando si codificano menu nidificati. Non sarà necessario ridefinire gli stili dei sottomenu.

Codice errato:

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

Buon codice:

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

Come scrivere HTML pulito

Passando all'HTML, la priorità sarà garantire un front-end robusto e di facile manutenzione.

Cerca di avere un front-end il più possibile basato sul markup.

Rendi il tuo codice front-end basato sul markup invece di scrivere troppi CSS.

Ciò aiuterà i motori di ricerca e renderà il tuo codice più leggibile, migliorando potenzialmente le classifiche di ricerca e l'esperienza dell'utente.

Codice errato:

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

Buon codice:

 <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 di usare wrapper non necessari in HTML.

Cerca di non utilizzare elementi wrapper non necessari in HTML. Avere tonnellate di elementi <div> e <span> appartiene al passato. Mantenere le cose granulari e lineari ti consente di ottenere un codice minimo (vedi punto successivo).

Codice errato:

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

Buon codice:

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

Usa le classi atomiche per lo styling.

Non utilizzare colori o dimensioni dei caratteri personalizzati (se il colore o la dimensione del carattere non è nel framework, aggiungi semplicemente le tue classi atomiche). Le classi atomiche sono unità di styling semplici e monouso. Proprio come gli stili inline, gli stili Atomic applicano solo una singola dichiarazione di stile.

Codice errato:

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

Buon codice:

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

Cerca di mantenere le classi granulari e atomiche e usale quando necessario. Di conseguenza, il tuo front-end diventerà più basato sul markup.

Usa gli elementi semantici.

L'uso della semantica fornisce una struttura migliore e semplifica la lettura del codice e del contenuto.

Codice errato:

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

Buon codice:

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

Usa tag HTML5.

I nuovi tag offrono maggiore libertà espressiva e standardizzano gli elementi comuni, migliorando l'elaborazione automatizzata dei documenti. Ecco un solido elenco di tutti gli elementi. Ho scoperto che molti sviluppatori usano sempre molto <div> e <span> , ma prima controlla qui quali tag si adattano logicamente al tuo contesto:

Codice errato:

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

Buon codice:

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

Conclusione: impara e usa nuovi elementi in HTML5. Ne vale la pena!

CSS: codice pulito e preprocessori

Quando si tratta di CSS, è difficile non iniziare con qualche consiglio non originale, ma impertinente:

Usa un preprocessore CSS.

Sass è il linguaggio di estensione CSS di livello professionale più maturo, stabile e potente al mondo.

Sono disponibili due sintassi per Sass. Il primo, noto come SCSS (Sassy CSS) e utilizzato in tutto questo riferimento, è un'estensione della sintassi dei CSS. La seconda e più vecchia sintassi, nota come sintassi rientrata (o talvolta solo "Sass"), fornisce un modo più conciso di scrivere CSS.

Raggruppa i tuoi selettori: usa @extend in SASS.

Raggruppando i tuoi selettori o usando @extend in SASS, dovresti aiutare a mantenere il tuo codice ASCIUTTO (non ripetere te stesso).

Codice errato:

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

Buon codice:

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

Usa le unità rem invece dei pixel nei CSS.

Usa i REM per dimensioni e spaziature, ad esempio le dimensioni dei caratteri che crea in base alla font-size del carattere dell'elemento <html> radice. Consentono inoltre di ridimensionare rapidamente un intero progetto modificando la dimensione del carattere principale (ad esempio a una determinata query multimediale/dimensione dello schermo).

Scriverai meno codice per le visualizzazioni reattive:

Codice errato:

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

Buon codice:

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

Cerca di evitare di avere un'altezza o una larghezza fisse nei CSS.

Cerca di evitare di avere un'altezza o una larghezza fisse nei CSS. Le altezze possono essere generate avendo contenuto interno + imbottiture e le larghezze possono essere definite da un sistema a griglia (usare la griglia nidificata se necessario).

Codice errato:

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

Buon codice:

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

Assicurati di utilizzare l'elemento principale solo una volta in SCSS.

Quando utilizzi un preprocessore CSS e prevedi di scrivere uno stile per qualsiasi sezione, assicurati di utilizzare l'elemento padre in CSS solo una volta e di includere tutti gli elementi figlio e le query multimediali tra parentesi. Ciò ti consentirà di trovare e modificare facilmente l'elemento principale principale in un unico posto quando apporti modifiche in futuro.

Codice errato:

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

Buon codice:

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

Pensa a quali elementi saranno interessati prima di scrivere una regola CSS.

Pensa sempre a quali elementi saranno interessati prima di scrivere qualsiasi regola CSS. Se le tue modifiche non saranno comuni, scrivi le tue regole in modo da influenzare solo un determinato elemento e nient'altro.

Codice errato:

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

Buon codice:

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

Prova a cercare le regole e le variabili CSS esistenti prima di scriverne di nuove.

Cerca sempre le regole esistenti che si adattano allo stile desiderato, sia nel CSS personalizzato che nel framework. Solo se non c'è nulla di adeguato, procedi a scriverne uno nuovo.

Ciò è particolarmente importante quando si lavora con grandi app.

Codice errato:

 .jumbotron { margin-bottom: 20px; }

Buon codice:

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

Usa regole specifiche.

Se lo sfondo ha una proprietà, specifichiamo quella proprietà, ma se ha proprietà di sfondo diverse, possiamo dargli una dichiarazione.

Codice errato:

 .selector { background: #fff; }

Buon codice:

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

Usa proprietà e valori abbreviati.

Fai del tuo meglio per utilizzare più proprietà e valori abbreviati. Usando una proprietà abbreviata, puoi scrivere fogli di stile concisi e, il più delle volte, molto più leggibili, risparmiando tempo ed energia preziosi.

Codice errato:

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

Buon codice:

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

Usa em invece di px per l'altezza della linea.

L'uso delle unità em e px ci offre flessibilità nei nostri progetti e la possibilità di ridimensionare gli elementi su e giù invece di rimanere bloccati con dimensioni fisse. Possiamo utilizzare questa flessibilità per rendere i nostri progetti più facili da regolare durante lo sviluppo e più reattivi, oltre a consentire agli utenti del browser di controllare la scala generale dei siti per la massima leggibilità.

Codice errato:

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

Buon codice:

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

Usa le classi Bootstrap il più possibile.

Sebbene questa regola possa applicarsi ai framework dell'interfaccia utente in generale, sto usando Bootstrap come esempio, perché è la libreria di componenti front-end più popolare al mondo.

Bootstrap ti consente di utilizzare molte classi pronte, semplificando il tuo lavoro. Prova a utilizzare le classi Bootstrap il più possibile, per creare più markup basato su HTML.

Codice errato:

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

Buon codice:

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

Personalizza correttamente il tuo framework.

Bootstrap si basa sul file variabili.scss, che ti consente di configurare e personalizzare facilmente il tuo front-end senza scrivere una sola riga di codice. Altrimenti, se hai intenzione di scrivere manualmente tutte le personalizzazioni da solo, è meglio non utilizzare affatto un framework.

Alcuni sviluppatori evitano di modificare variabili.scss, pensando che saranno comunque in grado di aggiornare Bootstrap a una nuova versione senza troppi problemi, ma può essere un compito noioso. Anche gli aggiornamenti minori richiedono agli sviluppatori di leggere il registro delle modifiche, esaminare tutti i markup e i CSS e migrare manualmente alla nuova versione.

Codice errato:

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

Buon codice:

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

Non sovrascrivere la larghezza .container .

Cerca di non sovrascrivere la larghezza di .container . Prova invece a utilizzare un sistema a griglia o semplicemente modifica la larghezza del contenitore in _variables.scss . Se hai bisogno di ridurne la larghezza, usa semplicemente max-width invece di width. In tal caso, .container di Bootstrap rimarrà intatto nelle visualizzazioni reattive.

Codice errato:

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

Buon codice:

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

Usa le classi Bootstrap 4 e scrivi meno CSS.

Inizia a usare Bootstrap 4, anche se è in versione beta. Include molte nuove classi che ti aiuteranno a creare layout più velocemente, in particolare Flexbox e spaziatori.

Codice errato:

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

Buon codice:

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

Ora possiamo assegnare classi a un elemento per rimuovere tutti i bordi o alcuni bordi.

Codice errato:

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

Buon codice:

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

Usa .col-sm-X se .col-md-X e .col-lg-X hanno lo stesso valore per X.

Non scrivere .col-md-X e .col-lg-X se .col-sm-X ha lo stesso valore per X. Ad esempio, non è necessario scrivere .col-lg-10 perché quando scriviamo .col-md-10 , includiamo automaticamente .col-lg-10 .

Codice errato:

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

Buon codice:

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

Non utilizzare .col-xs-12 .

Non utilizzare .col-xs-12 perché se non viene assegnato .col-xs-X , sarà .col-xs-12 per impostazione predefinita.

Codice errato:

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

Buon codice:

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

Non utilizzare reset.css ; usa invece normalize.css .

Se stai usando Bootstrap, normalize.css è già incluso lì, non è necessario includerlo due volte.

Segui le linee guida, anche se non sono una best practice.

Per motivi di coerenza, è meglio seguire sempre le regole e le linee guida con cui hai iniziato (indipendentemente dal fatto che si tratti di denominazione, stile del codice o struttura dei file)

Avvolgendo

Spero che tu sia stato in grado di portare via qualcosa di utile e che penserai di più a scrivere codice HTML e CSS minimo con le migliori pratiche.

Per le grandi aziende, è abbastanza difficile mantenere grandi applicazioni quando c'è un codice disordinato. E, naturalmente, le grandi aziende hanno i soldi per pagare una buona qualità. Se segui principi di codifica puliti, aumenterai le tue possibilità di ottenere un buon lavoro. Vale anche la pena sollevare l'aspetto del freelance: i professionisti che si destreggiano tra più progetti e clienti devono fornire codice pulito che può essere passato ad altri sviluppatori in pochissimo tempo.

Spero di approfondire argomenti più avanzati nei post futuri, poiché intendo parlare dell'automazione del processo di codifica, dell'utilizzo di attività Gulp/Grunt, Linters, plug-in Editor, strumenti che generano codice, strumenti di intelligenza artificiale che scrivono codice al posto tuo e altro argomenti correlati.

Spero che questa sia stata una lettura interessante e istruttiva. Buona fortuna per i tuoi sforzi di codifica.

Ulteriori letture sul blog di Toptal Engineering:

• Come avvicinarsi alle animazioni SVG nei CSS