{"id":3495,"date":"2025-11-05T04:58:42","date_gmt":"2025-11-05T10:58:42","guid":{"rendered":"https:\/\/www.teamdesk.net\/blog\/?p=3495"},"modified":"2025-11-05T04:58:44","modified_gmt":"2025-11-05T10:58:44","slug":"styling-new-teamdesk-ui-part-2-common-conventions","status":"publish","type":"post","link":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/","title":{"rendered":"Styling new TeamDesk UI, part 2: Common conventions"},"content":{"rendered":"\n<style>\ncode { background-color: #EEE; }\n.hljs-selector-class, .hljs-selector-id, .hljs-selector-tag { color: #800; }\n<\/style>\n\n\n\n<p><\/p>\n\n\n\n<p>In old <a href=\"https:\/\/www.teamdesk.net\">TeamDesk<\/a> UI in order to lower the amount of data transferred we marked page elements sparsely, rather relying on complex styling. When we added custom styling capabilities this approach started to pose the problem.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This article discusses customizing TeamDesk appearance using cascading stylesheets (CSS). If you are not familiar with CSS, feel free to read our <a href=\"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/\">Styling new TeamDesk UI, part 1: CSS Basics<\/a> blog article.<\/p>\n<\/blockquote>\n\n\n\n<p>In order to override the style, you had to replicate the same complex selector to match the specificity of original one. <\/p>\n\n\n\n<p>Reused style parameters like border radius were spread all over our stylesheet. We had a little problem with it since we were using CSS preprocessor supporting variables but if you wanted to give interface rectangular look you would need to override few dozen styles. Styles based on custom-defined colors were applied right onto the HTML elements.<\/p>\n\n\n\n<p>Aligning elements to the left and right edge of container element (header to the left, buttons to the right for example) were implemented via element&#8217;s floating which is counter-intuitive in this case.<\/p>\n\n\n\n<p>In new UI we tried to address these and many other shortcomings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We added class names to every element we style.<\/li>\n\n\n\n<li>We brought class names into the easy-to-remember system.<\/li>\n\n\n\n<li>Most of the styling can be done applying to single class name.<\/li>\n\n\n\n<li>We use font-size-relative units extensively.<\/li>\n\n\n\n<li>We use CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Properties\">custom properties<\/a> (also known as CSS variables) to style commonly used parameters.<\/li>\n\n\n\n<li>We extensively use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/CSS_layout\/Flexbox\">Flexbox<\/a> layout to align elements.<\/li>\n\n\n\n<li>Since new interface uses lighter color scheme, we extensively manipulate with colors defined for elements via database setup section. <\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s dive into new styling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Class naming common convention<\/h2>\n\n\n\n<p>Since new styling is a radical departure from old one, when new UI is in use we plug separate CSS file, <strong>dbstyles-v3.css<\/strong> in.<\/p>\n\n\n\n<p>HTML on the page is typically organized into logical blocks (header, tabs, sidebar, footer). Those blocks consist of other HTML elements, indivisible from parent block. Blocks or elements may change their appearance based on some conditions. <\/p>\n\n\n\n<p>To markup such a structure, <a href=\"https:\/\/getbem.com\/naming\/\">BEM<\/a> (block-element-modifier) naming convention is the best choice. In BEM first goes block name. If block consists of indivisible elements, for each element goes double underscore as a separator, then element name. Finally, class name is optionally suffixed with double dash and modifier&#8217;s name. <\/p>\n\n\n\n<p>And to distinguish between old and new UI all new classes have <em>v3-<\/em> prefix. Let&#8217;s see how it works on, say, tabs.<\/p>\n\n\n\n<p>Semantically, tab bar is an unordered list of links. Styled, it&#8217;s a strip of <em>cells<\/em>, each cell holding an <em>item<\/em> (link). One of the items can be active.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"171\" src=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-9.png\" alt=\"Demonstates class naming common convention\" class=\"wp-image-3545\" srcset=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-9.png 569w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-9-300x90.png 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/a><\/figure>\n\n\n\n<p><em>v3-tabs<\/em> class rules set flexbox layout. <em>v3-tabs__cell<\/em> \u0441lass rules define the size of the cell. <em>v3-tabs__item<\/em> define the look of the tab, while <em>v3-tabs__item&#8211;active<\/em> rules override active tabs text and background colors. A sort of:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.v3-tabs {\n    display: flex;\n}\n.v3-tabs__cell {\n    flex: 0 0 auto;\n}\n.v3-tabs__item {\n    color: red;\n    background-color: lightred;\n}\n.v3-tabs__item--active {\n    color: white;\n    background-color: red;\n}<\/code><\/pre>\n\n\n\n<p>Clean and simple. <\/p>\n\n\n\n<p>Rarely, multiple classes still used in combination, but these are typically pinpoint changes to the styling depending on the context.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Relative units<\/h2>\n\n\n\n<p>We extensively use relative units, <em>em<\/em> or <em>rem<\/em> for elements&#8217; sizing. To refresh, <em>em<\/em> is a size of capital Latin letter M rendered with current font. <em>Rem<\/em> (root em) is a size of capital Latin letter M rendered with font defined at root (HTML element) level. Using ems and rems allow us to easily achieve scaling effect: bigger the root font, bigger are elements&#8217; paddings and margins. <\/p>\n\n\n\n<p>Our old UI had fairly large CSS block to handle &#8220;dense&#8221; version of the interface. With relative units, new UI simply scales the font on HTML level. Font selector does nothing more than setting font size to 12px, 14px and 16px for small, normal and large font.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"152\" height=\"275\" src=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/10\/image-10.png\" alt=\"\" class=\"wp-image-3546\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Properties<\/h2>\n\n\n\n<p>Using custom properties allows us to share the value between components that has no direct connection to each other, concentrate common parameters at block level or simplify styling by calculating styles based on a single property value. As custom properties are inherited down HTML elements&#8217; tree, it&#8217;s also useful to provide defaults at tree&#8217;s root level and override values at certain contexts. For example, we are defining uniform border radius via &#8211;v3-border-radius custom property at root level. This radius value is used by tabs, buttons, input controls, sidebar and what not. If you want to give buttons rectangular look, you simply set new radius value for all buttons.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>:root {\n    --v3-border-radius: 6px;\n}\n\n.v3-button {\n    --v3-border-radius: 0px;\n}<\/code><\/pre>\n\n\n\n<p>Custom property names start with double dash (by CSS convention). Following common convention, we also added <em>v3-<\/em> prefix for our variables. Properties, prefixed with &#8211;<em>-v3-sys-<\/em> are either set by JavaScript code or used to hold intermediate calculation results and not intended for modification.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colors common conventions and calculation<\/h2>\n\n\n\n<p>Color manipulation is a most interesting part of the new UI. TeamDesk setup section allows specifying colors for tables\/tabs, views, buttons, form sections and many more. Old UI mainly used colors specified by the user as is. Due to different colorization scheme in new UI, we take user-specified color as a basis and producing a set of new colors by manipulating selected color&#8217;s darkness\/brightness. This is done using HSL color scheme and CSS mathematical functions.<\/p>\n\n\n\n<p>&#8220;Classic&#8221; method of specifying the color is to provide a triplet of red, green and blue channels&#8217; brightness levels, called RGB color scheme. HSL color scheme uses different approach. It specifies hue as a degree (0-360) on a color wheel, saturation in percentage from gray to pure color and lightness, in percentage, from black to white. While changing color lightness in RGB requires multiplication of each component proportionally, in HSL you simply need to adjust L component. But how?<\/p>\n\n\n\n<p>CSS Color support is developing, and modern browser have a lot of color related functionality implemented, such as <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_colors\/Relative_colors\">relative colors<\/a>. But while some old hardware such as Apple iPhone 6s or iPad Air 2 receive no new feature updates it still gets security updates and perfectly usable. As we do not want to drop these devices support, we have to resort to good old basic math. You are free to set your own browsers&#8217; baseline, just do not forget to check <a href=\"https:\/\/caniuse.com\/?search=CSS+Relative+color+syntax\">compatibility tables<\/a>.<\/p>\n\n\n\n<p>If we specify colors as three custom properties holding numeric value of H, S and L components, then we can construct real color and derived colors using basic math operations. Schematically it is:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.button {\n   \/* back color components, unitless *\/\n   --back-h: 206;\n   --back-s: 100;\n   --back-l: 34;\n\n   \/* construct color value from components *\/ \n   background-color: hsl(var(--back-h), calc(1% * var(--back-s)), calc(1% * var(--back-l));\n   \/* choose white\/black text color based on background's lightness *\/\n   color: hsl(0, 0%, calc(100% * (50 - var(--back-l)));\n}\n\n.button:hover {\n   \/* for hover state, construct color value from components making background lighter *\/ \n   background-color: hsl(var(--back-h), calc(1% * var(--back-s)), calc(1% * (var(--back-l) + 20));\n}<\/code><\/pre>\n\n\n\n<p>What we do here? We specify button&#8217;s background color as three properties each holding corresponding color component in HSL color space. To simplify color manipulation all three are integer numbers, unitless.<\/p>\n\n\n\n<p>Then we construct color value from these components. Hue component needs no unit as long as value specified in degrees. To convert integer number to percentage we multiply the value by 1% and wrap math expression with calc() function. This way we specify saturation and lightness components.<\/p>\n\n\n\n<p>For hover state we specify background color the same way, but adding 20 to lightness components.<\/p>\n\n\n\n<p>Determining text color another simple trick &#8212; we subtract background&#8217;s lightness from midpoint (50). For colors lighter than 50 the result of subtracting will be negative. For colors darker than 50 the result will be positive. Assuming the value is integer and multiplying the result by 100% we have either negative or zero lightness value which is interpreted as black or lightness greater than or equal to 100% which is interpreted as white.<\/p>\n\n\n\n<p>Let&#8217;s make a cheat sheet with common expressions that might be useful in color construction. <\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>\/* Construct color value from components *\/\n--color: hsl(var(--color-h), calc(1% * var(--color-s)), calc(1% * var(--color-l)));\n\/* Determine color is dark or light (dark: 0, light: 1) *\/\n--color-light: max(0, min(var(--color-l) - 50), 1);\n\/* Determine color is dark or light (dark: 1, light: 0) *\/\n--color-dark: max(0, min(50 - var(--color-l)), 1);\n\/* Inverting 0\/1 to 1\/0 *\/\n--color-dark: calc(1 - var(--color-light));\n\/* If back color is light choose dark gray, else light gray *\/\n--text-color-l: calc(var(--color-light) * 10 + (1 - var(--color-light)) * 90);<\/code><\/pre>\n\n\n\n<p>Our stylesheet uses these tricks in various combinations, but nothing more complex.<\/p>\n\n\n\n<p>Ok, enough for today.<\/p>\n\n\n\n<p>In the next article &#8212; documenting root level global variables, typography and color palette.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When styling new UI we addressed many shortcomings. We added class names to every element we style. We brought class names into the easy-to-remember system. Most of the styling can be done applying to single class name. We extensively use Flexbox layout to align elements.<\/p>\n","protected":false},"author":4,"featured_media":3560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog<\/title>\n<meta name=\"description\" content=\"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog\" \/>\n<meta property=\"og:description\" content=\"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/\" \/>\n<meta property=\"og:site_name\" content=\"TeamDesk Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T10:58:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-05T10:58:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kirill Bondar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirill Bondar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/\"},\"author\":{\"name\":\"Kirill Bondar\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"headline\":\"Styling new TeamDesk UI, part 2: Common conventions\",\"datePublished\":\"2025-11-05T10:58:42+00:00\",\"dateModified\":\"2025-11-05T10:58:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/\"},\"wordCount\":1258,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/css-part.png\",\"articleSection\":[\"Tips &amp; Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/\",\"name\":\"Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/css-part.png\",\"datePublished\":\"2025-11-05T10:58:42+00:00\",\"dateModified\":\"2025-11-05T10:58:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"description\":\"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/css-part.png\",\"contentUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/css-part.png\",\"width\":600,\"height\":600,\"caption\":\"CSS, common conventions\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-2-common-conventions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling new TeamDesk UI, part 2: Common conventions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\",\"name\":\"TeamDesk Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\",\"name\":\"Kirill Bondar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"caption\":\"Kirill Bondar\"},\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/author\\\/kirill-bondar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog","description":"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/","og_locale":"en_US","og_type":"article","og_title":"Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog","og_description":"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.","og_url":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/","og_site_name":"TeamDesk Blog","article_published_time":"2025-11-05T10:58:42+00:00","article_modified_time":"2025-11-05T10:58:44+00:00","og_image":[{"width":600,"height":600,"url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png","type":"image\/png"}],"author":"Kirill Bondar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirill Bondar","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#article","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/"},"author":{"name":"Kirill Bondar","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"headline":"Styling new TeamDesk UI, part 2: Common conventions","datePublished":"2025-11-05T10:58:42+00:00","dateModified":"2025-11-05T10:58:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/"},"wordCount":1258,"commentCount":0,"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png","articleSection":["Tips &amp; Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/","url":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/","name":"Styling new TeamDesk UI, part 2: Common conventions - TeamDesk Blog","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#primaryimage"},"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png","datePublished":"2025-11-05T10:58:42+00:00","dateModified":"2025-11-05T10:58:44+00:00","author":{"@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"description":"Common convention in new UI addresses many styling shortcomings by assigning classes to elements, using class naming, CSS custom properties.","breadcrumb":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#primaryimage","url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png","contentUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/11\/css-part.png","width":600,"height":600,"caption":"CSS, common conventions"},{"@type":"BreadcrumbList","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-2-common-conventions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.teamdesk.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Styling new TeamDesk UI, part 2: Common conventions"}]},{"@type":"WebSite","@id":"https:\/\/www.teamdesk.net\/blog\/#website","url":"https:\/\/www.teamdesk.net\/blog\/","name":"TeamDesk Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.teamdesk.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2","name":"Kirill Bondar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","caption":"Kirill Bondar"},"url":"https:\/\/www.teamdesk.net\/blog\/author\/kirill-bondar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/comments?post=3495"}],"version-history":[{"count":16,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3495\/revisions"}],"predecessor-version":[{"id":3561,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3495\/revisions\/3561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media\/3560"}],"wp:attachment":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media?parent=3495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/categories?post=3495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/tags?post=3495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}