{"id":33502,"date":"2022-06-29T12:49:07","date_gmt":"2022-06-29T12:49:07","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=33502"},"modified":"2022-06-29T13:15:41","modified_gmt":"2022-06-29T13:15:41","slug":"using-locally-scoped-custom-properties","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/using-locally-scoped-custom-properties\/","title":{"rendered":"USING LOCALLY SCOPED CUSTOM PROPERTIES"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Kevin<\/li><li>March 11, 2019<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is a nice and cool template created by using locally scoped properties, we can easily style individual components. The title here has a class of\u00a0<code>.title<\/code>, as do the\u00a0<code>h2<\/code>\u00a0for each of the following sections. Because locally scoped properties have been used to style them, we don&#8217;t even need to select them, we only have to select the parent and change the value of the property. There is no need to define them in the global scope, as they aren&#8217;t global properties. For example, the\u00a0<code>--button-scale<\/code>\u00a0has no need to be defined globally, as it&#8217;s only used within my buttons. Working like this can help keep things nice and organized, yet very easy to make changes without getting into specificity wars or the need to go wild with extra classes to make minor modifications.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> font-awesome.css<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/kevinpowell\/share\/zip\/70404eeeaa9c182ee89974c95b936a78\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/kevinpowell\/pen\/70404eeeaa9c182ee89974c95b936a78\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n\n\n<a href=\"https:\/\/css-tricks.com\/breaking-css-custom-properties-out-of-root-might-be-a-good-idea\/\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Article<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Kevin March 11, 2019 Made with: HTML \/ CSS About the code: This is a nice and cool template created by using locally scoped properties, we can easily style individual components. The title here has a class of\u00a0.title, as do the\u00a0h2\u00a0for each of the following sections. Because locally scoped properties have been used to style them, we don&#8217;t even need to select them, we only have to select the parent and change the value of the property. There is no need to define them in the global scope, as they aren&#8217;t global properties. For example, the\u00a0&#8211;button-scale\u00a0has no need to be defined globally, as it&#8217;s only used within my buttons. Working like this can help keep things nice and organized, <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":33503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9188],"tags":[9203,20,9200,9201,5613,9202,9205],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/33502"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=33502"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/33502\/revisions"}],"predecessor-version":[{"id":33504,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/33502\/revisions\/33504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/33503"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=33502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=33502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=33502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}