# Issue with Minified CSS and {# comment syntax

**URL:** <https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029>\
**Category:** CMS Development\
**Tags:** design-manager, css\
**Created:** [February 25, 2020, 2:52pm UTC](https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029 "2020-02-25T14:52:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![benji\_thecroc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/benji_thecroc/32/31851_2.png) [@benji\_thecroc](https://community.hubspot.com/u/benji_thecroc)\
**Post date:** [February 25, 2020, 2:52pm UTC](https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029/1 "2020-02-25T14:52:16Z")

</div>

Hi,

So I’ve come across a slight pain in the butt. We tend to develop our templates locally in order to use SCSS and task processors such as Gulp, it’s just so much easier and efficient to do this rather than straight into the HubSpot design tools editor. We then copy the minified code and paste it into the relevant CSS/JS file for use in HubSpot.

I’ve just come accross the issue where there’s a conflict in HubL and CSS syntax where if an ID selector is within a media query this can cause a comment to be opened and not closed, meaning I have to manually find that conflict and add a space or a return after the opening bracket. e.g…

`@media(min-width:576px){#letsTalkModal...`

I’m just wondering why the use of HubL comment syntax is used in CSS when it can clearly cause a conflict and standardardised CSS comments can just be used as per normal? Is there a case to be made for removing HubL comment syntax for CSS file types in HubSpot Design Manager?

Thanks,

Benji

---

<div class="post-metadata">

**Author:** ![prosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/prosa/32/4387_2.png) [@prosa](https://community.hubspot.com/u/prosa)\
**Post date:** [February 26, 2020, 11:09pm UTC](https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029/2 "2020-02-26T23:09:09Z")

</div>

are you using the code in the header of the page instead of a css file? or the css section in the modules?

you can modify your gulp config to replace {# with { # after you are done with the build. that may save time

---

<div class="post-metadata">

**Author:** ![benji\_thecroc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/benji_thecroc/32/31851_2.png) [@benji\_thecroc](https://community.hubspot.com/u/benji_thecroc)\
**Post date:** [March 3, 2020, 10:12am UTC](https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029/3 "2020-03-03T10:12:13Z")

</div>

Using it in a CSS file type within the design manager as it’s a global style sheet.

---

<div class="post-metadata">

**Author:** ![AZrust](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/azrust/32/99730_2.png) [@AZrust](https://community.hubspot.com/u/AZrust)\
**Post date:** [June 27, 2024, 1:02pm UTC](https://community.hubspot.com/t/issue-with-minified-css-and-comment-syntax/19029/4 "2024-06-27T13:02:25Z")

</div>

I have the same issue…