CODEWITHSUNDEEP
csstwitter-bootstrap
user1431282
user1431282

Reputation: 6835

Copying CSS classes

Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.

So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do

.myownclass {
    -- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}

Upvotes: 0

Views: 1818

Answers (4)

HaNdTriX
HaNdTriX

Reputation: 29746

In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.

<div class="alert alert-error myownclass"></div>

If you are using less you can do it like this:

 .myownclass {
   .alert
   .alert-error;
 }

This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.

If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.

.myownclass {
   @extend .alert;
   @extend .alert-error;
}

Ref: Sass @extend

Upvotes: 2

Chris Herbert
Chris Herbert

Reputation: 6275

You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:

HTML

<h1 class="original_class myownclass">Hello</h1>

CSS

.original_class.myownclass {
  // css code
}

Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/

This does not require the use of a CSS preprocessor - it's just regular old CSS.

Upvotes: 1

Fabio
Fabio

Reputation: 2094

You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.

Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.

Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/

What are CSS preprocessors?

A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.

Should you use preprocessors?

The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:

  • Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.

  • Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.

  • Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.

Upvotes: 2

cimmanon
cimmanon

Reputation: 68319

You would have to use LESS to avoid copy/paste:

.myClass {
    .bootstrapClass;
}

Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).

Upvotes: 1

Related Questions