100 lines
No EOL
5.4 KiB
JSON
100 lines
No EOL
5.4 KiB
JSON
{
|
|
"uuid": [
|
|
{
|
|
"value": "b37e1838-19be-45b4-a70c-f4d0ab51eef4"
|
|
}
|
|
],
|
|
"langcode": [
|
|
{
|
|
"value": "en"
|
|
}
|
|
],
|
|
"type": [
|
|
{
|
|
"target_id": "daily_email",
|
|
"target_type": "node_type",
|
|
"target_uuid": "8bde1f2f-eef9-4f2d-ae9c-96921f8193d7"
|
|
}
|
|
],
|
|
"revision_timestamp": [
|
|
{
|
|
"value": "2025-04-16T14:13:00+00:00"
|
|
}
|
|
],
|
|
"revision_uid": [
|
|
{
|
|
"target_type": "user",
|
|
"target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849"
|
|
}
|
|
],
|
|
"revision_log": [],
|
|
"status": [
|
|
{
|
|
"value": true
|
|
}
|
|
],
|
|
"uid": [
|
|
{
|
|
"target_type": "user",
|
|
"target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849"
|
|
}
|
|
],
|
|
"title": [
|
|
{
|
|
"value": "Utility classes make global scope local"
|
|
}
|
|
],
|
|
"created": [
|
|
{
|
|
"value": "2024-01-12T00:00:00+00:00"
|
|
}
|
|
],
|
|
"changed": [
|
|
{
|
|
"value": "2025-04-16T14:13:00+00:00"
|
|
}
|
|
],
|
|
"promote": [
|
|
{
|
|
"value": false
|
|
}
|
|
],
|
|
"sticky": [
|
|
{
|
|
"value": false
|
|
}
|
|
],
|
|
"default_langcode": [
|
|
{
|
|
"value": true
|
|
}
|
|
],
|
|
"revision_translation_affected": [
|
|
{
|
|
"value": true
|
|
}
|
|
],
|
|
"path": [
|
|
{
|
|
"alias": "\/daily\/2024\/01\/12\/utility-classes-make-global-scope-local",
|
|
"langcode": "en"
|
|
}
|
|
],
|
|
"body": [
|
|
{
|
|
"value": "\n <p>In my <a href=\"http:\/\/localhost:8000\/daily\/2024\/01\/09\/using-tailwind-css-is-a-great-way-to-learn-css\">recent pair programming session<\/a>, building components with Tailwind CSS, we experienced another benefit of styling with utility classes.<\/p>\n\n<p>CSS usually has a global scope, but utility classes change it to a local scope.<\/p>\n\n<p>For example, having a card component with a <code>card<\/code> class on it, any changes to the styles will affect all instances of any card component that uses the <code>card<\/code> class.<\/p>\n\n<p>How do you know you haven't broken something in a different component without re-checking every component manually?<\/p>\n\n<p>How do you easily modify or extend it as requirements change or add more card types?<\/p>\n\n<p>If you need to make a change in the future, you're likely to add more styles and modifiers and add to the CSS, causing it to grow rather than change the existing styles - in fear of breaking something else.<\/p>\n\n<p>With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.<\/p>\n\n<p>This also makes it easier to change, and because the classes and styles are added directly to that element, you don't need to worry about breakages elsewhere.<\/p>\n\n<p>If you need to add a new class to that card type, you can do so knowing that it won't affect all card styles globally in your application - just the one you're working on.<\/p>\n\n<p>This means you can change things more easily in the future but also work quicker now as you don't need to worry about all that additional context.<\/p>\n\n<p>You can focus on what you're working on right now.<\/p>\n\n ",
|
|
"format": "full_html",
|
|
"processed": "\n <p>In my <a href=\"http:\/\/localhost:8000\/daily\/2024\/01\/09\/using-tailwind-css-is-a-great-way-to-learn-css\">recent pair programming session<\/a>, building components with Tailwind CSS, we experienced another benefit of styling with utility classes.<\/p>\n\n<p>CSS usually has a global scope, but utility classes change it to a local scope.<\/p>\n\n<p>For example, having a card component with a <code>card<\/code> class on it, any changes to the styles will affect all instances of any card component that uses the <code>card<\/code> class.<\/p>\n\n<p>How do you know you haven't broken something in a different component without re-checking every component manually?<\/p>\n\n<p>How do you easily modify or extend it as requirements change or add more card types?<\/p>\n\n<p>If you need to make a change in the future, you're likely to add more styles and modifiers and add to the CSS, causing it to grow rather than change the existing styles - in fear of breaking something else.<\/p>\n\n<p>With utility classes, such as the ones generated by Tailwind CSS, you can see and understand what styles are applied to the HTML.<\/p>\n\n<p>This also makes it easier to change, and because the classes and styles are added directly to that element, you don't need to worry about breakages elsewhere.<\/p>\n\n<p>If you need to add a new class to that card type, you can do so knowing that it won't affect all card styles globally in your application - just the one you're working on.<\/p>\n\n<p>This means you can change things more easily in the future but also work quicker now as you don't need to worry about all that additional context.<\/p>\n\n<p>You can focus on what you're working on right now.<\/p>\n\n ",
|
|
"summary": null
|
|
}
|
|
],
|
|
"feeds_item": [
|
|
{
|
|
"imported": "2025-04-16T14:13:00+00:00",
|
|
"guid": null,
|
|
"hash": "973f27c3760e51af307827f7feb2d4d9",
|
|
"target_type": "feeds_feed",
|
|
"target_uuid": "90c85284-7ca8-4074-9178-97ff8384fe76"
|
|
}
|
|
]
|
|
} |