Jump to content

Simplifying Code

Recommended Posts

I have a basic understanding of CSS. Enough to get by and get the results I need most of the time. but my question is, how do I simplify my code so it's not so 'clunky'? Here is an example - it feels like there must be a better way to list the changes for this one section:

#latest-blogs 
.sqs-gallery-controls,
.summary-title-link,
.summary-excerpt,
.summary-read-more-link
{
color: #000000;
}
#latest-blogs 
.summary-title-link
{
font-size: 20px
}
#latest-blogs
h1
{
color: #0080C6
}

Link to comment

You are about as efficient as you can get with plain old CSS.

CSS selectors can be a little repetitive at times. Their design was probably a balance between a more verbose selector syntax and a more complicated one that would be harder to understand and implement programmatically.

Now Squarespace allows the input of LESS version 1.3.3 in Design > Custom CSS. LESS is a CSS preprocessor. In other words it takes LESS syntax and converts it to plain old CSS. So in the end you are not really gaining any savings as far as the CSS that your site produces. But it can save you some typing.

Of course learning LESS can be a challenge!

Following is your plain old CSS turned into LESS syntax.

.summary-excerpt,
.summary-read-more-link,
.summary-title-link

  {
  
    color : #000000;
    
    }

#latest-blogs {

  h1 {
  
    color : #0080C6;
    
    }
    
  .sqs-gallery-controls {
  
    color : #000000;
    
    }
    
  .summary-title-link {
  
    font-size : 20px;
    
    }
    
  }

Here you can see one of LESS's features, nested selectors.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.