Aplicando estilos CSS solo a ciertos elementos

Tengo un sitio web existente con muchas páginas antiguas y formularios establecidos con tablas que estoy tratando de pasar gradualmente a CSS. Quiero usar las hojas de estilo de Twitter Bootstrap, particularmente los estilos para los formularios, pero solo en las secciones de las páginas donde las solicité explícitamente. Por ejemplo, podría rodear toda la forma en un div como ese:

Quiero que todos los demás formularios permanezcan igual que ahora, porque no podré cambiarlos todos al mismo tiempo. ¿Hay una manera simple de hacer esto? Podría revisar cada estilo en el CSS de Bootstrap y agregar un selector principal (por ejemplo, ‘p’ se convertiría en ‘div.bootstrap p’), pero eso llevaría mucho tiempo y sería fácil pasar por alto los estilos.

Editar: si tal cosa no es posible, ¿hay alguna herramienta gratuita que pueda extraer todos los estilos de un archivo, agregar un prefijo y luego guardarlos nuevamente?

Para Bootstrap 3, es más fácil si usa less :

Descarga el código fuente de Bootstrap y style.less un archivo style.less como este:

 .bootstrap { @import "/path-to-bootstrap-less.less"; @import "/path-to-bootstrap-responsive-less.less"; } 

Finalmente, debe comstackr menos archivo; hay muchas alternativas

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js

O use npm para instalar less y compile el archivo style.css en style.css :

 npm install -g less lessc style.less style.css 

La solución final fue usar SASS (recomendado por alguien fuera del sitio), ya que le permite anidar elementos y luego producir automáticamente el CSS final. Paso a paso el proceso es:

  1. Concatenar los dos archivos Bootstrap ( bootstrap.css y bootstrap-responsive.css ) en bootstrap-all.css .
  2. Cree un nuevo archivo SASS, bootstrap-all.scss , con el contenido div.bootstrap { .
  3. bootstrap-all.css a bootstrap-all.scss .
  4. Cierre el selector div.bootstrap al div.bootstrap } a bootstrap-all.scss .
  5. Ejecute SASS en bootstrap-all.scss para generar un archivo CSS final.
  6. Ejecute YUI Compressor en el archivo final para producir una versión minimizada.
  7. Agregue la versión minimizada al elemento principal y ajuste todo a lo que quiero que se apliquen los estilos en

    .

Se me ocurrió una solución de CSS si no puede usar LESS / SASS por razones de trabajo / otras.

  1. Utilicé este sitio, http://www.css-prefix.com/ , y copié / pegué bootstrap.min.css allí. Configuro prefix = ‘. Bootstrap’ y spacer = ”. Prefijo todo con .bootstrap excepto que no perfectamente.
  2. Si hace un grep para ‘.bootstrap @media’, encontrará que la primera clase a la derecha del paréntesis de apertura no tiene .bootstrap como padre. Agregue .bootstrap a todas estas ocurrencias, aproximadamente 68 para mí.
  3. Luego reemplace todo ‘.bootstrap @media’ con ‘@media’.
  4. El paso final es reemplazar todo ‘.bootstrap @’ con ‘@’ (debe ser de aproximadamente 5 apariciones).

Ejemplo:

 .bootstrap @media (min-width:768px){.lead{font-size:21px}} 

necesita ser reemplazado a

 @media (min-width:768px){.bootstrap .lead{font-size:21px}} 

Tipo de método de fuerza bruta, así que definitivamente prueba primero el método LESS / SASS de arriba.

 
No Bootstrap
Yes Bootstrap

No estaba satisfecho con ninguna de estas respuestas. Usar Less para determinar el scope de las reglas creó todo tipo de defectos. Clearfix, por ejemplo, fue un desastre. Y las reglas como button.close convirtieron en button.bootstrap close lugar de lo que realmente quería: .bootstrap button.close .

Tomé un enfoque diferente. Estoy usando PostCSS para procesar el CSS listo para usar que se entrega con Bootstrap. Estoy usando el plugin Scopify para ver todas las reglas con .bootstrap .

Esto generalmente llega allí. Por supuesto, existen las reglas html y body que se convierten en .bootstrap html y .bootstrap body que se vuelven no sensuales. No se preocupe … solo puedo escribir una transformación PostCSS para limpiarlos:

 var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) { return function(css, result) { css.walkRules(function(rule) { rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap'); rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap'); }); } }); 

Ahora puedo aislar todos los estilos de Bootstrap al agregar una class="bootstrap" en el nivel superior.

Eso es duro. No puede Aplicar hojas de estilos CSS diferentes para diferentes partes de la misma página web .

Sospecho que la única forma de hacerlo es crear un archivo separado para que tu contenido tome los estilos de arranque, y lo marco en la página de esta manera:

  

luego en content-to-take-bootstrap-styles.html referencia a la hoja de estilo bootstrap en el encabezado. Pero luego tiene todas las complicaciones de los iframes, por ejemplo: el elemento iframe no crecerá para adaptarse a la duración de su contenido.

Tengo una solución fácil.

  1. Copie el contenido de bootstrap css en este ( http://css2sass.herokuapp.com/ ) css en línea al convertidor scss / sass.

  2. Agregue su información de etiqueta (por ejemplo, div.bootstrap{ ) al comienzo del contenido de scss y cierre la etiqueta al final.

  3. Copie todo el contenido de scss a este convertidor de scss a css ( https://www.sassmeister.com/ ) y conviértalo 🙂

Puede usar css aislado listo para usar para Bootstrap 4.1 (comstackdo con LESS) –

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

Ha aislado css para temas –

Para usar Bootstrap CSS, simplemente envuelva su HTML en un div con la clase bootstrapiso, así:

 

Y use cualquier estilo css desde la carpeta css4.1, de esta forma:

   ...  

// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

¡Hecho!