Home CSS Max Number of Classes in CSS File
Reply: 1

CSS Max Number of Classes in CSS File

viningd45
1#
viningd45 Published in 2018-02-09 15:51:32Z

I'm having some weird behavior from my CSS files while designing an html document. When I added a new class to my css file, it would not apply to the selected element (a div). This was probably the 14th class in that particular file. I continued to experiment and it seemed as though no matter what class name I gave it, it would not render. I tried some of the other classes I already had defined and they worked without any issue. Ultimately I ended up creating a second CSS file and truncating the majority of the classes that I didn't need for that document. Once I did that, the original class I was trying to apply worked without any issues.

So, I wanted to know if there is a maximum number of classes that a single css file is able to contain before they will no longer function properly. Is this possibly a result of me using razor code in my html? That doesn't make sense, but I am having trouble coming up with an explanation.

Thanks for any answers!

body {
  padding: 5%;
  padding-top: 12%;
  background-color: black;
  color: white;
}

.homeDiv {
  padding: 5px;
  background-color: white;
  color: black;
  border: 10px groove lightgrey;
}

.scanLabel {
  margin-bottom: 2px;
  font-weight: bold;
  font-size: 1.4em;
}

.inputBox {
  font-size: 1.4em;
}

.scannedNonActiveDiv {
  padding: 5px;
  background-color: white;
  color: black;
  border: 10px groove lightgrey;
}

.scannedText {
  font-size: 1.2em;
  text-align: center;
  width: 85%;
  margin-left: 7.5%;
  border: 1px solid black;
}

.cancelButton {
  border: 3px solid darkgrey;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 1.2em;
  width: 40%;
  margin-left: 5%
}

.sendButton {
  border: 3px solid darkgrey;
  font-size: 1.2em;
  width: 40%;
  margin-left: 7.5%;
  float: left;
  margin-top: 15px;
  margin-bottom: 5px;
}

.suggestion {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.goButton {
  border: 3px solid darkgrey;
  font-size: 1.2em;
  width: 20%;
}

.scannedActiveDiv {
  padding: 5px;
  background-color: white;
  color: black;
  border: 10px groove lightgrey;
}

.scannedText {
  font-size: 1.2em;
  text-align: center;
  width: 85%;
  margin-left: 7.5%;
  border: 1px solid black;
}

.activeTransport {
  margin-bottom: 2px;
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
}
<div class="scannedActiveDiv">
  <div class="activeTransport">Transport Ordered</div>
  <div class="scannedText">@Html.Raw(Model.active.HTMLToString())</div>
  <div class="suggestion">Transport to @Model.active.TargetBuffer</div>

  <form action="/mes/handscanner/scan1" method="get">
    <div><input type="submit" value="Cancel" /></div>
  </form>
</div>

It is an application for a barcode scanner. The class 'activeTransport' is the one not applying.

Ameer Bacchus
2#
Ameer Bacchus Reply to 2018-02-09 16:01:57Z

There is no limit to the number of classes you can have in a CSS file. My guess is that you had left off a bracket in your previous css class definition, or had some other typo that made your class definition fail.

My first go-to for diagnosis is Chrome's inspector. Right click the element on the page you are trying to select and view the results in the inspector. You should see your class definition, if not double check to make sure your names match between your html and css file. Secondly, I would check to make sure that the class definition that proceeds the faulty definition has been closed properly. You may be missing the closing bracket '}'.

If you do see the class definition in inspector, but your css changes have not been applied, you should see you attributes striked-out in the inspector. Follow the chain of classes beneath to see if you have some other styles that have precedence over your class.

Good luck.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305517 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO