Sono relativamente nuovo nello sviluppo web, ma cerco sempre di trovare il modo migliore e rendere il mio codice pulito anche da CSS e HTML. Quindi ho iniziato a esplorare le migliori pratiche.
Innanzitutto, iniziamo con em e rem . Oggigiorno la maggior parte dei siti utilizza ancora pixel anziché unità relative. Funziona correttamente, i telefoni cellulari possono ridimensionare i pixel ai pixel reali in base alla densità e ad altri fattori.
Innanzitutto i pixel sono unità statiche. E la maggior parte dei siti non viene ridimensionata quando le dimensioni dei caratteri cambiano nelle impostazioni del browser.
Personalmente ho trovato em e rem utili per il layout di pagina modulare.
Ogni modulo di livello superiore ha dimensioni di carattere specificate in unità rem , ma quasi tutte le dimensioni di elementi figli sono specificate in unità em .
Ecco un piccolo esempio
#home {
font-size: 1.5rem;
}
.overlay-intro {
display: table;
}
.intro {
padding: 1em 1em;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.intro .highlighted-title {
color: #FFC107;
}
.intro h1 {
margin-bottom: 0.2em;
font-size: 3.5em;
}
.intro .firtst-title-part {
color: #52b3d9;
}
.intro .second-title-part {
color: #68c3a3;
}
.intro .code-char {
font-size: 1.3em;
color: #68c3a3;
}
.intro p {
font-size: 1.3em;
color: #f7f7f7;
margin-bottom: 2em;
}
.intro .primary-color-title {
color: #52b3d9;
}
.intro-sub {
color: #fff;
font-size: 1.5em;
margin-bottom: 1em;
}
Sto usando unità relative quasi ovunque anche per impostare altezza e larghezza
.social-icons a i {
position: relative;
color: #fff;
font-size: 1.2em;
margin: 0 7px;
line-height: @socialIconSize;
text-align: center;
width: @socialIconSize;
height: @socialIconSize;
}
E penso che forse sia troppo?
E HTML
<!-- Intro Section -->
<section id="home">
<div class="overlay-intro">
<div class="intro">
<div class="intro-sub">
</div>
<div class="intro-title">
<h1></h1>
</div>
<div class="intro-description">
<p></p>
</div>
<div class="social-icons">
<ul class="list-inline">
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div> <!-- /.social-icons -->
</div>
</div>
</section>
Come puoi vedere tutto è specificato in em solo root div #home ha font-size in rem .
Quando ha senso?
@media only screen and (max-width : 768px) {
#home {
font-size : 1.4rem;
}
}
Ho bisogno di cambiare solo una proprietà della classe per rendere intero modulo (#home) per cambiare la dimensione dei suoi componenti e funziona piuttosto bene, in caso di pixel ho dovuto scavalcare molte proprietà, ma nel caso delle unità relative crea una sorta di relazione tra i blocchi all'interno del modulo.
D'altra parte, da DRY, OOCSS, BEM, questo approccio viola la maggior parte delle regole importanti come styles separation from content , rare using of location-dependent styles , avoid nesting , using single class for common properties e altre.
Ma nel mio caso ho violato la maggior parte di queste regole, perché i miei stili css dipendono in qualche modo dalla struttura html, perché ho usato unità relative, e se applicate alcuni di questi stili a un altro elemento all'interno di un altro modulo (root container) con dimensione del carattere diversa, non otterrò il risultato desiderato.
Quindi nel mio esempio la maggior parte delle classi non è assolutamente inutilizzabile, ovviamente posso usare LESS e mixin e aggiungere specifici mixin dove ne ho bisogno, ma alla fine verrà convertito in semplici vecchi CSS.
Aiutatemi a trovare il modo giusto per seguire, dovrei sbarazzarmi delle unità relative a causa di DRY, OOCSS, BEM ... o non seguire affatto questi approcci e lasciare così com'è? Forse sto usando le unità relative in modo errato o usandole troppo spesso, e dovrebbero essere usate solo con classi specifiche per la dimensione del font, non per impostare la larghezza e l'altezza degli elementi? Qualsiasi aiuto è molto apprezzato.