How can I avoid using too many classes in CSS?


Tags: css,twitter-bootstrap

Problem :

I am using bootstrap css framework. I want to create a table which has many styles. The code is like this:

<table id="myTable" class="table table-bordered table-striped table-condensed">
  ....
</table>

How can I avoid using so many classes (table table-bordered table-striped table-condensed) here? Can CSS do something like OO extend? I mean define a class named myTable and it can have many predefined styles.

Dummy code:

table.myTable{
  have_class: table table-bordered table-striped table-condensed;
}


Solution :

I'm not quite sure what you mean. Generally you want to use classes only when you have to, and then target by element first. If it's not possible by .class element then add another class. Remember, you can target more specifically by putting a space and adding another class/ID/element. The more you add, the more specific it becomes.

examples

table

#myTable tr

#myTable tr.first

#myTable .odd a

Also, if this is a problem with pre-defined twitter bootstrap classes, that is the problem with using a grid/styled boilerplate. It's not lightweight or lean by any stretch of the imagination. Twitter bootstrap is generally just for getting things up quickly, and prototyping... not for completed websites.

If youre looking for completely clean code, you'd want to code it from scratch.


    CSS Howto..

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to make a slanted css background without transparency overlapping?

    How to add two CSS Class to control in the code behind?

    How to set the specificity of a css over-ride class for XPages

    How to get the element position after css-translation

    How to avoid CSS selector applying to more than one level of descendants

    html, how to make elements not shift when browser zooms?

    How can I make the ul list the same size as the input element in terms of width?

    How to specify styles for h:panelgrid in jsf

    How to return a “text” in css less?

    How to get css or java class for specific part of code

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    how to apply transition effect in expand/collapse inside gridview rows

    CSS - how to style rounded area with a gradient background?

    Show button after login

    how do i get images to display in a rows like this using php and css?

    how to use javascript if in IE but use css for all other browsers?

    How to change decoration of a local HTML file to show it on the WebView in Android

    How to properly add divs inside another div so the original design doesn't break?

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How do I make a dropdown extend to the left?

    how to align an element but keep the space it left reserved

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How can I make the first letter push itself into the paragraph like a newspaper style

    How to create a darker background on a whole page with one new div

    How to change CSS style of nested list items?

    How to tell what is the right css line to apply in nested classes

    How to apply background-color: css only in a webkit browser

    how to make textarea looks like input[text] on form invalid