CODEWITHSUNDEEP
css
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Can I use Inline CSS one time only

I have heard that using inline CSS in your websites is bad.

Here's an example.

Let's say i do have a class mycss

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

And i will be using it in one of my divs

<div class="mycss">DIV ONE</div>

i want to use the same styles in my DIV TWO , this the margin will be set to 0.

<div class="mycss" style="margin: 0;">DIV TWO</div>

Is this a Bad Practice?

EDIT Another Example to make it more clearer.

I got 5 DIVS

 <div class="mycss">ONE</div>
 <div class="mycss">TWO</div>
 <div class="mycss">THREE</div>
 <div class="mycss">FOUR</div>
 <div class="mycss">FIVE</div>

Let's say i do have a class mycss

.mycss { margin: 10px 0 11px 12px; text-align: left; color: red; }

Now i want all 5 DIVS to have different margins. Should i go create 5 more classes in each of them? or just do an Inline CSS?

Will it be:

A.

 .marginfordivone { margin: 1px 2px 3px 4px }
 .marginfordivtwo { margin: 2px 4px 6px 6px }
 .marginfordivthree { margin: 8px 5px 1px 3px }
 .marginfordivfour { margin: 1px 2px 2px 2px }
 .marginfordivfive { margin: 1px 4px 8px 4px }.


 <div class="mycss marginfordivone">ONE</div>
 <div class="mycss marginfordivtwo">TWO</div>
 <div class="mycss marginfordivthree">THREE</div>
 <div class="mycss marginfordivfour">FOUR</div>
 <div class="mycss marginfordivfive">FIVE</div>

B. 

 <div class="mycss" style="margin: 1px 2px 3px 4px">ONE</div>
 <div class="mycss" style="margin: 2px 4px 6px 6px">TWO</div>
 <div class="mycss" style="margin:  8px 5px 1px 3px">THREE</div>
 <div class="mycss" style="margin: 1px 2px 2px 2px">FOUR</div>
 <div class="mycss" style="margin: 1px 4px 8px 4px">FIVE</div>

A or B

Upvotes: 1

Views: 715

Answers (4)

sheba
sheba

Reputation: 850

Yes, this is a bad practice.

Why don't you simply create two different classes?

.mycss { text-align: left; color: red; }
.mycss2 { margin: 10px 0 11px 12px; }

<div class="mycss mycss2">DIV ONE</div>
<div class="mycss">DIV TWO</div>

Update (to fit updated question)

You still shouldn't use inline css to override css classes. Just add another class (like i showed). If you have 5 different margins, you need to ask yourself why you are doing it. In general, you should be able to use margin-left, margin-right, margin-top and margin-bottom separately and then create css classes that are defined by their intention and not by their implementation. For instance:

.narrowSideMargins { 
    margin-left: 2px; 
    margin-right: 2px; 
}
.wideSideMargins { 
    margin-left: 10px; 
    margin-right: 10px; 
}

You may obviously choose any composition of the margins, but it's important to remember to define the classes by their intention and NOT by their actual current properties. This will answer both your original (and current) question and bazmegakapa's comment (methodologically).

Upvotes: 2

Ravi Teja
Ravi Teja

Reputation: 350

Yes, that will be a bad practice. Because, when u have most of the CSS styles in common and just want to change one or two style properties, you can do the following:

1) Create a Class for the most common style properties. 2) Create different classes for each of the individual changes.

  .mycss { text-align: left; color: red;}
    .mycss2 {margin: 10px 0 11px 12px; }
.mycss3 {margin: 0px}

Upvotes: 1

StreetCoder
StreetCoder

Reputation: 10061

You can write different two class as:

CSS:

.mycss-1 { margin: 10px 0 11px 12px; text-align: left; color: red; }

HTML:

<div class="mycss">DIV ONE</div>

CSS:

.mycss-2 { margin: 0; text-align: left; color: red; }

HTML:

<div class="mycss-2">DIV TWO</div>

Just make it more optimize as:

CSS:

.mycss{ text-align: left; color: red; }
.margin-1{ margin: 10px 0 11px 12px; }
.margin-2{ margin: 0; }

HTML:

<div class="mycss margin-1">DIV ONE</div>
<div class="mycss margin-2">DIV TWO</div>

Upvotes: 0

kapa
kapa

Reputation: 78731

Yes, it is.

Inline styles make your project very hard to maintain. Just add a different class on your second div, or use one of the many other CSS selectors to match it.

There are edge cases of course, where inline styles might come handy. Generating HTML server-side and having to put a generated CSS style on your element comes into mind, for example setting a background-image on it for which the image URL comes from the database.

Other than these, you are better off without ever thinking about using inline styles.

Upvotes: 0

Related Questions