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 to declare css “global” height? Inside the html file or inside the css file?

    How to configure opacity based CSS overlay to not effect spacing of surrounding elements?

    how to make css curve box with gradient & shadow

    How I do edit the css for just the home page on Magento?

    How can I center align the list horizontally?

    How to properly display content when I resize the window?

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

    How to solve position issue in ie7 using html and css?

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to make elements appear under a
      in Firefox & IE8?

    How to apply css to a dynamically created div?

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to parse CSS font shorthand format

    jQuery slideshow with separate div containing image specific text

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to change CSS of ng-view when triggering CSS in ng-include

    How to put bootstrap code inline

    CSS - How to add a second background image

    How to make IE support min-width / max-width CSS properties?

    How do I make an erasing animation in CSS? [closed]

    How do i rotate text in css

    How to space the children of a div with css?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How to programmatically check CSS styles for particular elements? [duplicate]

    How to create rounded shape by CSS

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    How to draw lines in ionic

    How to select a child element inside a div using CSS

    How to move/position DIV container by changing CSS values using Javascript?

    How do i make this nav 100% wide?