0

I have 200+ divs that have same classes. As you can see this will make page size huge. Is there a way to declare a class having same css properties of another class?

Example:

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 p-b-xs panel-body text-center bg-warning-lighter b-rad-md p-t-10 p-b-10 image-responsive-width big-class-name1 big-class-name2">
<p>some text</p>
<div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 p-b-xs panel-body text-center bg-warning-lighter b-rad-md p-t-10 p-b-10 image-responsive-width big-class-name1 big-class-name2">
<p>another text</p>
<div>

x 100's of divs like this

I want to have divs that look like this

<div class="cx12 cs6 cm6 cl6 pbx pbd text-center bgwl brm pt10 pb10 irw bcn1 bcn2">
<div>

Can we declare class cx12 = col-xs-12, pbd = panel-body, irw = image-responsive-width, bcn1 = big-class-name1, bcn2 = big-class-name2 either through css or js.

styxtrooper
  • 87
  • 1
  • 10
  • if you're working with less you can use classes as mixins `.cx12{.col-xs-12;}` But I would recommend making a class for multiple css maybe a maximum of 5 classes per element (excluding the columns) – AlexG Jun 15 '15 at 14:04
  • 1
    What exactly are you trying to optimize here? Why do you have 200 divs on a single page? – Halcyon Jun 15 '15 at 14:04
  • @Halcyon I'm am trying to reduce page file size. At 200 divs my page size after minimizing is above 2mb. by shortening the class names i could bring html file size under 1mb. – styxtrooper Jun 15 '15 at 14:11
  • Is that a real example? Because the short version is only 100 characters smaller than the long version. With 200 div's, thats 20,000 characters. That's not going to save you 1MB. – m69's been on strike for years Jun 15 '15 at 14:14
  • If all the divs have the same classes you could put the css rule on the parent: `.parent>div { foo: bar }` – Halcyon Jun 15 '15 at 14:16
  • @m69 Not Exactly. in actual code there are multi-layered divs. My sole question is if it's possible to clone classes. like .new-container = .container – styxtrooper Jun 15 '15 at 14:19
  • From the question that is supposedly a duplicate of your question, I gather it's not possible. There are some useful workarounds in the answers, but they require you to edit the existing stylesheets. Are you in a situation where that is impossible or impractical, and you can only append another stylesheet? – m69's been on strike for years Jun 15 '15 at 14:29
  • @AlexG So I could use mixins as `.allinone{p-b-xs; panel-body; text-center; bg-warning-lighter; b-rad-md; p-t-10; p-b-10; image-responsive-width; big-class-name1; big-class-name2; }` and only have to use class allinone. – styxtrooper Jun 15 '15 at 14:33
  • @m69 Yes, im using responsive framework so my entire website is responsive and classes like text-center, image-responsive-width, panel-body,etc are built in. I cannot mess with those as my website would break. I need those divs only for a separate page which uses isotope masonry. – styxtrooper Jun 15 '15 at 14:38
  • There are obviously script-based solutions, but I don't know whether those would be acceptable to you. Use the shortest class names possible, then have the script expand them at load time. – m69's been on strike for years Jun 15 '15 at 15:24

0 Answers0