{"id":202,"date":"2024-05-23T11:33:54","date_gmt":"2024-05-23T11:33:54","guid":{"rendered":"https:\/\/adhdux.com\/?p=202"},"modified":"2024-05-23T11:33:54","modified_gmt":"2024-05-23T11:33:54","slug":"design-tokens-components-and-variables","status":"publish","type":"post","link":"https:\/\/adhdux.com\/?p=202","title":{"rendered":"Design tokens, components and variables"},"content":{"rendered":"\n<p>Naming design tokens, components, and variables is crucial for maintaining a clean, understandable, scalable codebase. Here are some best practices:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design Tokens<\/h3>\n\n\n\n<p>Design tokens are named entities that store design decisions, such as colors, typography, spacing,&nbsp;etc. They bridge the gap between design and code.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistency:<\/strong>\u00a0Use a consistent naming convention throughout your tokens.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0color-primary, font-size-small<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Descriptive and Clear:<\/strong>\u00a0Names should describe the purpose or usage of the token.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0color-background-primary, spacing-small<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hierarchy:<\/strong>\u00a0Reflect a clear hierarchy, especially for tokens used in multiple contexts.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0button-color-primary, button-color-secondary<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Avoid hard coding:<\/strong>\u00a0Do not\u00a0tie names to specific values to allow flexibility.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0color-primary instead of color-blue<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CamelCase or kebab-case:<\/strong>\u00a0Stick to a casing style that fits your team&#8217;s conventions.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0font size large (CamelCase) or font-size-large (kebab-case)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Components<\/h3>\n\n\n\n<p>Components are reusable building blocks of your application. Naming should reflect their purpose and context.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Meaningful Names:<\/strong>\u00a0Names should indicate the component&#8217;s function and scope.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0UserCard, NavigationMenu<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>PascalCase:<\/strong>\u00a0Use PascalCase for component names.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0ButtonPrimary, UserProfile<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Modular and Scoped:<\/strong>\u00a0If components are nested or scoped, reflect this in the name.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0HeaderLogo, FooterLinks<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Avoid Abbreviations:<\/strong>\u00a0Full\u00a0names are better than cryptic abbreviations\u00a0for clarity.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0SidebarMenu instead of SbMn<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>BEM Methodology:<\/strong>\u00a0For complex components with states or variations, consider BEM (Block Element Modifier).\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0Button&#8211;primary, Card__title<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Variables<\/h3>\n\n\n\n<p>Variables hold data or references used in your code. Their names should be intuitive and descriptive of their content or purpose.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Descriptive and Specific:<\/strong>\u00a0Variable names should describe the content they hold or the role they play.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0userAge,\u00a0isAuthenticated<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>LowerCamelCase:<\/strong>\u00a0Use lowerCamelCase for variable names.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0firstName, totalPrice<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Avoid Magic Numbers\/Strings:<\/strong>\u00a0Use variables instead of hard-coding values.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0const maxRetries = 5; instead of const retry = 5;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Contextual Naming:<\/strong>\u00a0The name should make sense within the context of its use.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0isUserLoggedIn in authentication context,\u00a0buttonDisabled\u00a0in\u00a0UI\u00a0context<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Short but Clear:<\/strong>\u00a0While brevity is good,\u00a0clarity should not be sacrificed.\n<ul class=\"wp-block-list\">\n<li><strong>Example:<\/strong>\u00a0totalAmount\u00a0instead of ta<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">General Tips<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistency:<\/strong>\u00a0Regardless of your naming, consistency across your project is\u00a0key. Agree on a naming convention with your team and stick to it.<\/li>\n\n\n\n<li><strong>Documentation:<\/strong>\u00a0Maintain a naming convention guide in your project documentation.<\/li>\n\n\n\n<li><strong>Review:<\/strong>\u00a0Regularly review names for clarity and consistency during code reviews.<\/li>\n\n\n\n<li><strong>Refactoring:<\/strong>\u00a0Don&#8217;t hesitate to refactor names if they become misleading as the project evolves.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Adhering to these best practices can help you create a codebase that is easy to read, maintain, and scale.<\/h4>\n","protected":false},"excerpt":{"rendered":"<p>Naming design tokens, components, and variables is crucial for maintaining a clean, understandable, scalable codebase. Here are some best practices: Design Tokens Design tokens are named entities that store design decisions, such as colors, typography, spacing,&nbsp;etc. They bridge the gap between design and code. Components Components are reusable building blocks of your application. Naming should<\/p>\n<p><span class=\"more-wrapper\"><a class=\"more-link button\" href=\"https:\/\/adhdux.com\/?p=202\">Continue reading<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[82,34,42,3,83],"class_list":["post-202","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-components","tag-design-systems","tag-tokens","tag-ux","tag-variables"],"_links":{"self":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=202"}],"version-history":[{"count":1,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/adhdux.com\/index.php?rest_route=\/wp\/v2\/posts\/202\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adhdux.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}