{"id":16291,"date":"2018-06-07T12:02:06","date_gmt":"2018-06-07T17:02:06","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/blog\/?p=16291"},"modified":"2021-11-17T02:10:28","modified_gmt":"2021-11-17T08:10:28","slug":"tips-for-css-workflow","status":"publish","type":"post","link":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/","title":{"rendered":"Tips for CSS Workflow From the Pros"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]<\/p>\n

\"\"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. There are many reasons why non-efficient CSS code files are undesirable. When you\u2019re looking at a confusing and disjointed file, it\u2019s far more difficult to debug. Moreover, when your site requires an upgrade, messy CSS code makes it almost impossible to perform even the easiest of updates.<\/p>\n

So let\u2019s put an end to the days of messy CSS programming. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code. As a general rule, keep things as simple and straightforward as possible. Less truly is more when it comes to dynamic CSS workflow.<\/p>\n

Tip #1 | Bundle Your Properties<\/h2>\n

Who doesn\u2019t love a good bundle? You know who adores bundles? CSS stylesheets. If you find yourself constantly writing the same CSS properties multiple times throughout your stylesheet, then it\u2019s time to do some bundling.<\/p>\n

See if you can remove useless IDs and classes. From here, combine common properties into relevant sections. While you\u2019re at it, see if you can combine or remove excess sections from your code. This not only makes your file easier to write and debug, but removing excess content form a stylesheet helps it run and render faster. Ultimately, this tip refers back to the fundamental principle of planning your stylesheet after you\u2019ve written your HTML code.<\/p>\n

Tip #2 | Maximize the Use of IDs<\/h2>\n

Unlike PHP, CSS isn\u2019t capable of actually programming your site. Moreover, CSS isn\u2019t able to define constants, or repeated stylistic choices. Without a smart workflow, you may find yourself repeatedly typing the same styles, which is not only time-consuming, but the opposite of an optimized CSS stylesheet<\/a>.<\/p>\n

Using IDs for constants is an awesome idea for those who are unable to bundle sections. This process is relatively straightforward. Simply create an ID that consists of the styles you need to use multiple times. Therefore, when you need to call upon the styles of a particular CSS declaration, you simply add ID selectors to declarations. This helps not only write faster code, but condensed code.<\/p>\n

Tip #3 | Group Your Selectors<\/h2>\n

In the effort to compress CSS without shedding visual design choices<\/a>, you should investigate the power of grouping selectors together. This not only makes for smaller, less-dense code, but grouping selectors can boost your code writing time exponentially without sacrificing style. When grouping selectors, simply add each selector separated by a comma before writing their declaration. For example:<\/p>\n

h1, h2, h3, h4, p {<\/span>
\n padding: 1em;<\/span>
\n font-family: \u201cTimes New Roman\u201d, Times, serif;<\/span>
\n }<\/span><\/p>\n

Using the example above, whenever you use any heading or paragraph tag, the rendered content will reflect the style declarations listed above. As you can imagine, this tip saves a decent amount of time and CSS file size as you only write the selector-declaration code once rather than repeat the same information five times. This can be done with any selector that you wish share the same visual declaration.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row][vc_column][vc_column_text] If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. There are many reasons why non-efficient CSS code files are undesirable. When you\u2019re looking at a confusing and disjointed file, it\u2019s far more difficult to debug. Moreover, when your site requires…<\/p>\n","protected":false},"author":6,"featured_media":16418,"comment_status":"open","ping_status":"open","sticky":false,"template":"template-url.php","format":"standard","meta":[],"categories":[40],"tags":[76,77],"yoast_head":"\r\nTips for CSS Workflow From the Pros | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Tips for CSS Workflow From the Pros\" \/>\r\n<meta property=\"og:description\" content=\"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta property=\"article:published_time\" content=\"2018-06-07T17:02:06+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2021-11-17T08:10:28+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"900\" \/>\r\n\t<meta property=\"og:image:height\" content=\"400\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:creator\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Schmitz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let's Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#primaryimage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg\",\"contentUrl\":\"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg\",\"width\":900,\"height\":400,\"caption\":\"CSS workflow tips\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/\",\"name\":\"Tips for CSS Workflow From the Pros | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#primaryimage\"},\"datePublished\":\"2018-06-07T17:02:06+00:00\",\"dateModified\":\"2021-11-17T08:10:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/84f55a21a34f808cb7cc381f7f580ebb\"},\"description\":\"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips for CSS Workflow From the Pros\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/84f55a21a34f808cb7cc381f7f580ebb\",\"name\":\"Matt Schmitz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78f5aac7d4727a530bbb530b52140067?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/78f5aac7d4727a530bbb530b52140067?s=96&d=retro&r=pg\",\"caption\":\"Matt Schmitz\"},\"description\":\"Matt Schmitz is a web performance engineer and director of Dotcom-Monitor\u2019s web performance division. Matt is a leading authority on page speed optimization and has been featured by a number of web performance blogs and media outlets. When he\u2019s not working to make the web a faster place, Matt\u2019s interests include gaming, cryptocurrency, and martial arts.\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/author\/schmitzm\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tips for CSS Workflow From the Pros | Dotcom-Monitor Tools Blog","description":"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.","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.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/","og_locale":"en_US","og_type":"article","og_title":"Tips for CSS Workflow From the Pros","og_description":"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","article_published_time":"2018-06-07T17:02:06+00:00","article_modified_time":"2021-11-17T08:10:28+00:00","og_image":[{"width":900,"height":400,"url":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg","type":"image\/jpeg"}],"twitter_card":"summary","twitter_creator":"@dotcom_monitor","twitter_site":"@dotcom_monitor","twitter_misc":{"Written by":"Matt Schmitz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let's Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#primaryimage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg","contentUrl":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-content\/uploads\/2018\/04\/CSS-workflow-tips-from-pros.jpg","width":900,"height":400,"caption":"CSS workflow tips"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/","name":"Tips for CSS Workflow From the Pros | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#primaryimage"},"datePublished":"2018-06-07T17:02:06+00:00","dateModified":"2021-11-17T08:10:28+00:00","author":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/84f55a21a34f808cb7cc381f7f580ebb"},"description":"If you\u2019ve ever written CSS, then you understand how easy it is to suddenly end up with a messy, complex and confusing file. The following CSS workflow tips are designed to help streamline your workflow, while simultaneously boosting the readability and simplicity of code.","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/tips-for-css-workflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Tips for CSS Workflow From the Pros"}]},{"@type":"Person","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/84f55a21a34f808cb7cc381f7f580ebb","name":"Matt Schmitz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/78f5aac7d4727a530bbb530b52140067?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/78f5aac7d4727a530bbb530b52140067?s=96&d=retro&r=pg","caption":"Matt Schmitz"},"description":"Matt Schmitz is a web performance engineer and director of Dotcom-Monitor\u2019s web performance division. Matt is a leading authority on page speed optimization and has been featured by a number of web performance blogs and media outlets. When he\u2019s not working to make the web a faster place, Matt\u2019s interests include gaming, cryptocurrency, and martial arts.","url":"https:\/\/www.dotcom-tools.com\/web-performance\/author\/schmitzm\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16291"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=16291"}],"version-history":[{"count":7,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16291\/revisions"}],"predecessor-version":[{"id":17767,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/posts\/16291\/revisions\/17767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media\/16418"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=16291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/categories?post=16291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/tags?post=16291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}