8

Estoy trabajando en los estilos de una serie de páginas con Bootstrap.

Resulta que recurrentemente tengo que utilizar una serie de propiedades. Por ejemplo:

class="col-md-5 text-center border border-rounded"

Esta combinación me va bien y quiero utilizarla en distintos ficheros. En condiciones normales, si se tratara de un simple ajuste de color de fondo, por ejemplo, lo que haría es nombrarlo del tipo class="miGenerica" y después en mi fichero estilos.css añadiría una línea definiendo el estilo:

miGenerica {
    // ... propiedades...
}

Sin embargo, al tratarse de un sistema Bootstrap no veo posible añadir los datos con:

miGenerica {
    col-md-5
    border
}

Entonces, ¿cómo puedo generalizar los valores de Bootstrap en un fichero externo para no tener que ir copiándolos de fichero en fichero?

8
  • Con SCSS... sería fácil... con CSS podrías copiar el estilo de cada clase de bootstrap y generar así una sola clase... o si trabajas por ejemplo con PHP meter las clases en una variable.... etc Commented el 7 may. 2020 a las 14:22
  • @BlackSheep trabajo con Vue.js y estoy empezando. Si SCSS escala bien, no tendría inconveniente en usarlo.
    – fedorqui
    Commented el 7 may. 2020 a las 14:24
  • Pues si puedes trabajar con SCSS...te podría dejar una opción como respuesta Commented el 7 may. 2020 a las 14:27
  • 1
    @BlackSheep yo encantado :) Ten en cuenta que soy novato en el tema, por lo que toda explicación será útil y bienvenida
    – fedorqui
    Commented el 7 may. 2020 a las 14:29
  • Por otro lado, siempre puedes crear elementos con un id o con una clase específica y aplicar los estilos repetitivos a dichos elementos usando Javascript. Pero todo dependerá de lo complejo de tu maqueta HTML y de si te sientes cómodo trabajando con JS. Saludos Commented el 7 may. 2020 a las 14:47

3 respuestas 3

5

Una posible respuesta es usando SASS (SCSS) y con @extend, donde puedes añadir las clases existente de Bootstrap (o cualquier otra clase):

.generica {
    @extend .col-md-5;
    @extend .m-0;
}
5

Una opción que se me ocurre, pero que no sé si sea práctico para lo que intentas hacer, es añadir las clases recurrentes usando Javascript.

De esta forma, evitas escribir tanto código durante la maquetación. Sin embargo, tal como plantea @PHPMyGuel en su respuesta, de cara a la revisión del código por parte de otros desarrolladores y más adelante de cara a tus propias revisiones, hacerlo de esta forma es contra intuitivo, ya que se pierde la semántica del código a la primera vista.

Por ejemplo:

const clasesRecurrentes = ['col-sm-5', 'mx-1', 'text-center', 'border', 'rounded'];
const colsRecurrentes = document.getElementsByClassName('recurrente');
for(let col of colsRecurrentes) {
  col.classList.add(...clasesRecurrentes);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row mx-2 justify-content-center">
  <div class="recurrente">
   ...Contenido...
  </div>
  <div class="recurrente">
   ...Contenido...
  </div>
</div>

De esta forma, he insertado las clases recurrentes a los elementos adecuados (siempre y cuando JavaScript esté habilitado en el navegador).

1
  • Excelente opción, me la guardo para futuros proyectos. Commented el 14 may. 2020 a las 2:49
2

Personalmente, no incluiría las clases que definen el sistema de grilla de Bootstrap en lo que quieres hacer, por la sencilla razón de que a nivel visual, en el HTML aportan mucho. Es muy útil poder ver de un solo vistazo en el HTML la estructura que define Bootstrap. No es lo mismo ver esto:

<div class="row">
  <div class="col-4">
    <p>Columna</p>
  </div>
  <div class="col-4">
    <p>Columna</p>
  </div>
  <div class="col-4">
    <p>Columna</p>
  </div>
</div>

Que ver esto otro:

<div class="mi clase">
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
  <div class="mi_otra_clase">
    <p>Columna</p>
  </div>
</div>

Más claro lo primero, creo yo, tanto para ti como para cualquiera que quiera meter mano posteriormente a tu código.

El resto de tus clases son bastante sencillas, te puedes llevar las reglas CSS de estás clases a la tuya propia.

.conjunto-recurrente {
  text-align: center !important;
  border: 1px solid #dee2e6!important;
  border-radius: .25rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="col-md-5 text-center border rounded">
  <p>Mi div</p>
</div>

<div class="col-md-5 conjunto-recurrente">
  <p>Mi otro div</p>
</div>

1
  • Vale, buen punto. El problema es que a medida que voy "tuneando" los estilos se acumulan bastantes elementos en la descripción, que utilizo en distintas pantallas.
    – fedorqui
    Commented el 7 may. 2020 a las 14:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.