Twitter Bootstrap Question posted in

Is there a way make HTML code independent from changes in CSS class names? – Twitter bootstrap

I am using Twitter Bootstrap 3 for a while, but now Twitter Bootstrap 4 is coming. And new Twitter Booststrap comes with some changes, like renaming .table-condensed to .table-sm for example. For sake of future possible migration from current to future version, is there a way to make HTML code independent from changes in CSS class names?
For example, if I have .table-condensed class, is there a way to create my own class table-small and create it from existing Twitter Bootstrap‘s class table-condensed? Something like (pseudo-code):

.table-small {
    join(".table-condensed")
}

I use only pure CSS until this moment (I am Front-End Developer occasionally rather than full-stack:) ), if anybody will answer me if this thing is even possible in some way, maybe with preproccesors or something like that, I would be very grateful – thank you in advance !

Tags:

2

Answers


  1. 0

    If you’re using SASS then you can use the @extend function.

    However, it’s recommended to avoid doing this as it copies the selected class into the new one thus, essentially, doubling the size of your CSS

    The solution is either to not upgrade to BS-4, unless you have a requirement to. Or to update all your HTML when you do

    Edit

    Reading through the SASS docs, it seems the functionality has been changed to work using the comma syntax. So this would be your best option going forward.

    It still generates excess CSS by doubling the number of classes, but not as bad as duplicating all your CSS

    Login or Signup to reply.
  2. 0

    You can use less css and do the following:

    .table-small {
    &:extend(.table-condensed);
}

    This does not copy over the class like sass but just adds the selector:

    Generated css:

    .table-condensed,
.table-small {
    background: red;
}

    preprocessor online: http://lesscss.org/less-preview/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search