Ho alcune div nascoste che mostro tramite JavaScript quando si fa clic su un pulsante. In questo momento, li sto nascondendo usando lo stile in linea (cioè style="display:none;" ).
Funziona, ma ci sono regole generali o linee guida da seguire per determinare se dovrei usare gli stili o lo stile in linea tramite fogli di stile e selettori di classe?
Certo, perché no? Ad esempio:
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
.hidden
{
display:none;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<div class="hidden">This CSS example is hidden!</div>
<p>This paragraph is visble.</p>
</body>
Mi piacciono gli stili in linea durante la progettazione di in-browser poiché non devo tornare indietro e rimuovere i selettori che non uso. È anche più veloce per me vedere quali stili sono applicati a cosa e da dove. In realtà non mi sono mai imbattuto in problemi lasciandoli così per stili unici (ad esempio, se ho bisogno di un padding personalizzato su uno specifico DIV) finché non avrò bisogno di personalizzare questi stili per i dispositivi mobili, nel qual caso dovrò rimuoverne alcuni Posso ignorarli con le mie query sui media. Ma, se finisco per utilizzare lo stesso insieme di regole su più elementi, creo quasi sempre una classe per questo. Quindi, in un guscio di noce, li uso per una tantum che non ho bisogno di sovrascrivere utilizzando le query multimediali.
In quanto disclaimer, questa è la mia opinione basata sui miei anni di esperienza e non necessariamente basata sulle migliori pratiche. Se vengo in un progetto cercherò sempre di utilizzare le loro best practice consolidate, che in genere non usano gli inline-style, sebbene mi rendano la vita più facile sia come sviluppatore iniziale che come manutentore successivo.