È possibile eseguire l'oscilloscopio dei file CSS in modo che vengano applicati solo ai discendenti di un determinato elemento?

Question

Dato un file css, esiste un modo per esplorare l'intero file in modo che si applichi solo agli elementi all'interno di un dato elemento:

ad es. dato:

<div id="container"> 
    <span class="some_element"/> 
    <!-- etc --> 
</div> 

Esiste un modo per ambito di un intero file css da applicare a tutti gli elementi all'interno "contenitore" senza anteponendo #container ad ogni clausola singolo css?

Answer 1

Ho paura di no. Alcuni pre-processori CSS ti consentono di scrivere codice che ottenga lo stesso risultato.

E.g. LESS implementa regole annidate:

/* This LESS code... */ 

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

/* ...produces this CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

E Andy menzionato SASS, che fa la stessa cosa.

Answer 2

Non solo con CSS, ma è possibile utilizzare Sass, che viene compilato in CSS.

Answer 3

Si può caricare la pagina con php e lanciare qualsiasi tag desiderato in modo dinamico, o fare lo stesso con javascript/jQuery ... anche se è abbastanza goffo. Non esiste un metodo integrato per farlo, poiché il CSS viene sempre applicato all'intera pagina.

Answer 4

È possibile utilizzare l'attributo scoped su un elemento <style>, anche se il supporto del browser è scarso o nullo. Nel tuo esempio:

<div id="container"> 
    <style scoped>.some_element{}</style> 
    <span class="some_element"></span> 
</div> 

Ecco un jQuery Polyfill: http://thingsinjars.com/post/360/scoped-style/

Answer 5

Ci sono 2 modi si potrebbe avvicinarsi a questo:

1) In HTML5, (non ancora ampiamente supportato) ci deve essere un L'attributo scoped è possibile inserire un tag <style>. Here è un breve articolo sull'argomento.

2) È possibile utilizzare un linguaggio di foglio di stile dinamico (come LESS o SASS) che consente di annidare insieme le regole CSS correlate.

Answer 6

È possibile utilizzare la notazione di denominazione BEM - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ("blocco, elemento, modificatore").

Il vostro esempio diventerebbe:

<div id="container"> 
    <span class="container__some_element"/> 
    <!-- etc --> 
</div> 

Sì, se non utilizzare un'abbreviazione, si sta scrivendo lo stesso numero di caratteri nel CSS ... ma i vostri stili avrete meno specificity - - che può essere utile.

Speriamo che il supporto del browser per <style scoped> migliorerà nei prossimi anni!