Single-Line Vs Multi-Line CSS Formatting

Single-line vs multi-line CSS formatting

It's all a matter of preference based on what your team decides on. However, here's my take on why I use single-line formatting:

When I need to maintain CSS, I'm most often looking to modify an existing selector. If the start of every line is a new selector, and not just more style declarations, it makes it easier to scan the document for the selector I want to find. It also means less scrolling to find what I need.

Once I've found the selector I need to edit, good syntax highlighting makes it easy to read the rules for a specific selector, so I don't lose any readability by having all of my style declarations on a single line.

That being said, I wouldn't say it helps with file size any. I rely on YUI Compressor to compress my CSS for me automatically, rather than trying to manually maintain an efficiently declared style document.

Formatting CSS into single or multiple lines based on property count

This would work, even for media queries:

regex

{\s*+([^:{}]+:[^:{}]+?)\s*}

• {\s*+ - detect opening curly brace and greedily capture whitespace
• ([^:{}]+:[^:{}]+?) - find one property and save it into capture group 1
• \s*+} - greedily capture whitespaces and a closing curly brace

replace

{ $1 }

• Format the output into the desired newline-less style

https://regex101.com/r/j5NPQH/1

Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code?

Why this behaviour happens:

Prettier breaks lines after a certain amount of characters specified by the Print Width config option.

This option can be changed but it should be noted that

Prettier recommends setting this option to < 80 to improve readability,
(source)

For readability we recommend against using more than 80 characters:
In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

How to prevent this behaviour:

I'll go over some of the ways you can stop auto-wrapping:

• Stopping auto-wrapping globally
• Stopping auto-wrapping locally
• Stopping auto-wrapping for a particular group of code

---

Stopping auto-wrapping globally

If you use the Visual Studio Code editor and the esbenp.prettier-vscode extension all you need to do to stop auto-wrapping is modify your global settings.json file. These are the steps that you need to follow.

1. Open settings.json

• Use Ctrl+Shift+P to open the command palette.

• From here type and select: > Preferences: Open Settings (JSON)

2. Set the option in settings.json

Appending this line to the end of your settings.json file means Prettier will only wrap the line when it exceeds 1000 characters (essentially never). You can change this number to preference, for reference the default is 80.

{
  "prettier.printWidth": 1000
}

Just make sure to save changes to the file and you are done!

---

Stopping auto-wrapping locally

This method works regardless of your IDE, we can create a .prettierrc file in the root of our project, and set the printWidth for our local project.

1. Create the .prettierrc file

Some older operating systems might try to prevent you from creating an extension only file. So when in the root of your project you can use this command to create your file.

Linux:

touch .prettierrc

Windows:

echo "" > .prettierrc

2. Set the printWidth

Add these lines to your .prettierrc file.

{
  "printWidth": 1000
}

Save the file and you're good to go,

Once again:

Appending this line to the end of your .prettierc file means Prettier will only wrap the line when it exceeds 1000 characters (essentially never). You can change this number to preference, for reference the default is 80.

---

Stopping auto-wrapping for a particular group of code

You can use a prettier-ignore comment to tell prettier not to format the following block of code, here are some examples from the prettier docs for JavaScript, HTML and CSS.

JavaScript

// prettier-ignore
matrix(
 1, 0, 0,
 0, 1, 0,
 0, 0, 1
)

This would otherwise be formatted to:

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

This would otherwise be formatted to:

<div class="x">hello world</div>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

This would otherwise be formatted to:

.my ugly rule {
}

You can see the full list of language specific ignore strings here, as well as the options for ignoring a certain range of a file.

---

Note: Local settings in the .prettierrc file will override global settings in the settings.json file.

css single or multiple line vertical align

For this you can use display:table-cell property:

.inline {  display: inline-block;  margin: 1em;}.wrap {  display: table;  height:  100px;  width:   160px;  padding: 10px;  border:  thin solid darkgray;}.wrap p {  display:        table-cell;  vertical-align: middle;}

<div class="inline">  <div class="wrap">    <p>Example of single line.</p>  </div></div>
<div class="inline">  <div class="wrap">    <p>To look best, text should really be centered inside.</p>  </div></div>

---

Related Topics