Why is inline styling OK with bootstrap?
I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
html bootstrap-4
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
add a comment |
I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
html bootstrap-4
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
2
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
@jonrsharpe Okay, so it's not in astyleattribute, butjustify-content-centerstill seems pretty inline-stylistic to me. It describes how the content should look, not what it is.
– AuxTaco
Nov 12 '18 at 1:08
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06
add a comment |
I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
html bootstrap-4
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:
<button style="color: white; border: 5px solid red;"> Press me! </button>
And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.
The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.
html bootstrap-4
html bootstrap-4
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
edited Nov 11 '18 at 22:49
jonrsharpe
76.7k11101208
76.7k11101208
asked Nov 11 '18 at 22:40
Gargamel113
163
asked Nov 11 '18 at 22:40
Gargamel113
163
asked Nov 11 '18 at 22:40
Gargamel113
163
163
2
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
@jonrsharpe Okay, so it's not in astyleattribute, butjustify-content-centerstill seems pretty inline-stylistic to me. It describes how the content should look, not what it is.
– AuxTaco
Nov 12 '18 at 1:08
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06
add a comment |
2
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
@jonrsharpe Okay, so it's not in astyleattribute, butjustify-content-centerstill seems pretty inline-stylistic to me. It describes how the content should look, not what it is.
– AuxTaco
Nov 12 '18 at 1:08
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06
2
2
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
@jonrsharpe Okay, so it's not in a
style attribute, but justify-content-center still seems pretty inline-stylistic to me. It describes how the content should look, not what it is.– AuxTaco
Nov 12 '18 at 1:08
@jonrsharpe Okay, so it's not in a
style attribute, but justify-content-center still seems pretty inline-stylistic to me. It describes how the content should look, not what it is.– AuxTaco
Nov 12 '18 at 1:08
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06
add a comment |
1 Answer
1
active
oldest
votes
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
answered Nov 12 '18 at 0:17
jorscobry
856
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253968%2fwhy-is-inline-styling-ok-with-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
answered Nov 12 '18 at 0:17
jorscobry
856
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
add a comment |
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
answered Nov 12 '18 at 0:17
jorscobry
856
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
add a comment |
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
answered Nov 12 '18 at 0:17
jorscobry
856
The first instance is inline styling:
<button style="color: white; border: 5px solid red;"> Press me! </button>
and the second has several classes that are styled in a separate css file:
<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>
One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.
For example (bad practice):
HTML
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
vs (good practice):
HTML
<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>
CSS
.button {
background-color: dodgerblue;
}
You can read more about CSS styling here.
answered Nov 12 '18 at 0:17
jorscobry
856
edited Nov 15 '18 at 21:48
answered Nov 12 '18 at 0:17
jorscobry
856
answered Nov 12 '18 at 0:17
jorscobry
856
answered Nov 12 '18 at 0:17
jorscobry
856
856
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
add a comment |
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
Thank you very much for taking your time and clarifying this! It´s perfectly clear now. I thought that it was only for readability that one shouldn´t use inline styling. thank you again for taking your time to explain! hope you have a great day!
– Gargamel113
Nov 12 '18 at 2:22
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253968%2fwhy-is-inline-styling-ok-with-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
That's not inline styling. They're just classes, the stylesheet that maps them to styles is elsewhere.
– jonrsharpe
Nov 11 '18 at 22:47
@jonrsharpe Okay, so it's not in a
styleattribute, butjustify-content-centerstill seems pretty inline-stylistic to me. It describes how the content should look, not what it is.– AuxTaco
Nov 12 '18 at 1:08
Okey but another one then just to take something that´s a little more like inline styling. still a class but only with one purpouse <button style="background: yellow;" Click me</button> <button class="bg-warning"> Click me</button> I am just curious because I want to learn the right way from the beginning. Hope you have a great day and thank you for your awnser!
– Gargamel113
Nov 12 '18 at 3:06