Is defining classes for almost every property a good practice?
$begingroup$
I was checking Tailwind CSS. It introduces itself as follows:
Tailwind is different from frameworks like Bootstrap, Foundation, or
Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no built-in UI
components.
So there is no card, breadcrumb, etc; its CSS classes are mostly representing CSS styles. For example the class block represents display: block;.
As an example:
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Adam Wathan</p>
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>
Is it really a good practice? Is there any use cases for this kind of frameworks?
I know that it simplifies parts of the job, but assume you want to change all your buttons from rounded to cornered. Beside repeating ourselves, we have to write lots of code; almost one class for every CSS property-value (as you can see in the code above).
css framework
asked 1 hour ago
mrmowjimrmowji
1314
$endgroup$
add a comment |
$begingroup$
I was checking Tailwind CSS. It introduces itself as follows:
Tailwind is different from frameworks like Bootstrap, Foundation, or
Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no built-in UI
components.
So there is no card, breadcrumb, etc; its CSS classes are mostly representing CSS styles. For example the class block represents display: block;.
As an example:
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Adam Wathan</p>
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>
Is it really a good practice? Is there any use cases for this kind of frameworks?
I know that it simplifies parts of the job, but assume you want to change all your buttons from rounded to cornered. Beside repeating ourselves, we have to write lots of code; almost one class for every CSS property-value (as you can see in the code above).
css framework
asked 1 hour ago
mrmowjimrmowji
1314
$endgroup$
add a comment |
$begingroup$
I was checking Tailwind CSS. It introduces itself as follows:
Tailwind is different from frameworks like Bootstrap, Foundation, or
Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no built-in UI
components.
So there is no card, breadcrumb, etc; its CSS classes are mostly representing CSS styles. For example the class block represents display: block;.
As an example:
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Adam Wathan</p>
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>
Is it really a good practice? Is there any use cases for this kind of frameworks?
I know that it simplifies parts of the job, but assume you want to change all your buttons from rounded to cornered. Beside repeating ourselves, we have to write lots of code; almost one class for every CSS property-value (as you can see in the code above).
css framework
asked 1 hour ago
mrmowjimrmowji
1314
$endgroup$
I was checking Tailwind CSS. It introduces itself as follows:
Tailwind is different from frameworks like Bootstrap, Foundation, or
Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no built-in UI
components.
So there is no card, breadcrumb, etc; its CSS classes are mostly representing CSS styles. For example the class block represents display: block;.
As an example:
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Adam Wathan</p>
<p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>
Is it really a good practice? Is there any use cases for this kind of frameworks?
I know that it simplifies parts of the job, but assume you want to change all your buttons from rounded to cornered. Beside repeating ourselves, we have to write lots of code; almost one class for every CSS property-value (as you can see in the code above).
css framework
css framework
asked 1 hour ago
mrmowjimrmowji
1314
asked 1 hour ago
mrmowjimrmowji
1314
asked 1 hour ago
mrmowjimrmowji
1314
asked 1 hour ago
mrmowjimrmowji
1314
asked 1 hour ago
mrmowjimrmowji
1314
1314
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fcodereview.stackexchange.com%2fquestions%2f212499%2fis-defining-classes-for-almost-every-property-a-good-practice%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
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%2fcodereview.stackexchange.com%2fquestions%2f212499%2fis-defining-classes-for-almost-every-property-a-good-practice%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
