LESS Css: regole nidificate

[Cesar]

Buongiorno a tutti,
ho una quesito sulle regole nidificate di LESS.

Ho visto che tanti "big" del settore usano le regole nidificate a partire dal primo elemento fino all'ultimo.

Vi faccio un esempio veloce:

	<div id="wrapper">
		<div id="header-wrapper">
			<div id="header">
				<div id="logo">
					<h1>Logo</h1>
				</div>
				<div id="menu">
					<ul>
						[*]Pagina
						[*]Pagina
						[*]Pagina
						[*]Pagina
						[*]Pagina
					[/list]
				</div>
			</div>
		</div>
	
		<div id="page">
			<div id="content">
				...
			</div>
		</div>
	
	</div>

#wrapper{
	#header-wrapper {
		#header {
			#logo {
				h1{
					a{ 
						
					&hover:
					}
				}
			}
			
			#menu {
				ul {
					li{
						a{
						
						&hover:
						}
					}
				}
			}
		}
	}
	
	#page {
		#content {
		
		}
	}
}

Secondo voi è corretto questo metodo di lavoro?

[fcaldera]

il problema di questo approccio è che il css generato è poco ottimizzato visto che generi potenzialmente regole lunghissime (il che rende inutilmente pesante il css)

Del resto, per chi edita il file less, la comodità di avere tutte le regole organizzate in questo modo è un vantaggio in termini di leggibilità

Quindi secondo me è meglio usare una via di mezzo. Ovvero spezzare tutti quegli annidamenti in annidamenti più limitati (io come regola del pollice usando SASS non voglio generare regole con più di tre selettori, ad esempio)

[Cesar]

Ciao fcaldera,
ti ringrazio per la risposta.

A me interessa poco della pesantezza del codice css (tanto poi viene zippato).
Mi interessa di più la gestione del codice less e volevo sapere se l'esempio che ho postato può andare bene.

Quindi, tu mi consigli di nidificare al massimo 3 regole?

[fcaldera]

Originariamente inviato da Cesar
Ciao fcaldera,
ti ringrazio per la risposta.

A me interessa poco della pesantezza del codice css (tanto poi viene zippato).
Mi interessa di più la gestione del codice less e volevo sapere se l'esempio che ho postato può andare bene.

Quindi, tu mi consigli di nidificare al massimo 3 regole?

Anche se lo comprimi lato server in ogni caso un css con regole corte sarà meno pesante di un css che fa la stessa cosa con sei / sette / quindici selettori.

Inoltre Il browser ci metterà anche meno a farne il parsing e ad applicare le varie regole

IO ho scritto tre perchè per ME è una via di mezzo accettabile e comunque - anche scrivendo un css senza preprocessore - non uso mai più di tre selettori per regola.
Poi se vuoi spostare il problema sull'organizzazione interna del file less/sass per il preprocessore è un altro discorso (e quello che hai scritto tu non fa una piega) ma penso sia utile tenere sempre a mente che poi è il file css generato che fa funzionare la pagina

Ad esempio:
scrivere un mixin con sass è una cosa banale.
Ed è un attimo farsi prendere la mano e incorporarlo ovunque con un include.

Ma poi il css che genero avrà ripetizioni dello stesso codice più e più volte quando invece forse avrei dovuto pensare a definire lo stile ad una classe e usare quella classe nel markup invece di includere il mixin 50 volte.

Tutto questo per dire che i preprocessori sono uno strumento di lavoro molto utile e in grado di velocizzare il lavoro, ma se non ci si rende conto fino in fondo degli effetti sull'output delle features che sono a disposizione si rischia un mezzo disastro soprattutto su progetti grandi (che dovrebbero invece essere invece ben scalabili)