CLion
 
2025.1
Shortcuts: Windows
Get CLion
Join the CLion Early Access Program and try out new features before they are released! Find out more
  1. Reference
  2. Settings
  3. Editor
  4. Code Style
  5. Style Sheets
  6. CSS

Code Style. CSS

Last modified: 08 October 2024

File | Settings | Editor | Code Style | Style Sheets | CSS for Windows and Linux

CLion | Settings | Editor | Code Style | Style Sheets | CSS for macOS

CtrlAlt0S the Settings icon

Use this page to configure code style options for CSS files. When you change these settings, the Preview pane shows how this will affect your code.

Tabs and Indents

Use tab character

  • If this checkbox is selected, tab characters are used:

    • On pressing the Tab key

    • For indentation

    • For reformatting code

  • If the checkbox is cleared, CLion uses spaces instead of tabs.

Smart tabs

An indentation consists of two parts. One part results from nesting code blocks, and the other part is determined by alignment.

  • If this checkbox is selected, the part that results from nesting contains both tabs and spaces (if necessary), while the part defined by alignment consists only of spaces.

  • If this checkbox is cleared, only tabs are used. This means that after reformatting a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.

tip

The Smart Tabs checkbox is available if the Use tab character checkbox is selected.

Tab size

In this field, specify the number of spaces that fits in a tab.

Indent

In this field, specify the number of spaces to be inserted for each indent level.

Continuation indent

In this field, specify the number of spaces to be inserted between the values of properties.

Keep indents on empty lines

If this checkbox is selected, CLion retains indents on empty lines as if they contained some code. If the checkbox is cleared, CLion deletes the tab characters and spaces on empty lines.

Blank Lines

Use this tab to define where and how many blank lines you want CLion to retain and insert in your code after reformatting. The results are displayed in the Preview pane.

tip

The settings on this tab do not affect the number of blank lines before the first and after the last item.

Keep Maximum Blank Lines

In this area, specify the number of extra blank lines to be kept after reformatting.

Minimum Blank Lines

In this area, configure whether to have or not to have extra empty lines around top-level blocks and nested selectors. In the field next to each option, specify the minimum number of extra blank lines to be left.

Other

In this tab, specify the alignment, braces, spaces, and quotes options to be applied on reformatting.

Braces placement

Use this list to specify where CLion should place the opening braces of selectors. The available options are:

  • At the end of line

  • Next line

Align values

Use this list to specify how CLion should align attributes and values. The available options are:

  • Do not align: select this option to specify alignment on the first character of an attribute name.

  • On value: select this option to specify alignment on the first character of the value of an attribute.

  • On colon

Quote marks

In the CSS, SCSS, and Less context, CLion by default uses double quotes for generated string literals in import statements and URLs. To use single quotes, select Single from this list.

To apply the chosen style to the entire file after reformatting, select the Enforce on format checkbox below the list.

note

Currently changing the configuration for quotation marks does not affect injected style sheets and CSS code inside the <style> tags.

Align closing brace with properties

If this checkbox is selected, the closing brace of the selector will be placed under the list of properties.

If this checkbox is not selected, the closing brace of the selector will be placed under the selector.

Keep single-line blocks

If this checkbox is selected, the blocks with a single property will be confined to one line.

If this checkbox is not selected, each property will be placed to its own line.

Spaces

Select the checkboxes in this area to add a space after the colon delimiting key and value, and before the opening brace of the selector.

Comments

Use the controls in this area to configure positioning of line and block comments and spaces inside them.

  • Add spaces around block comments: select this checkbox to add leading and trailing spaces in block comments.

    By default, when you enclose a code fragment in a block comment, the text starts right after the opening /* characters without any spaces. Before the closing */ characters no space is inserted either. This default code style may conflict with some linters' rules, for example, ESLint.

HEX Colors

Use this area to configure the hex color syntax. You can select from the following check options:

  • Convert hex colors to: select this checkbox to configure the hex color letter case. You can choose Lower case or Upper case.

  • Convert hex colors format to: select this checkbox to configure the hex color format length. You can choose Long format or Short format.

View changes in the Preview pane.

Arrangement

In this tab, enable sorting of CSS properties, which is by default turned off, and select the sorting order.

  • To enable sorting, select the Sort CSS properties checkbox.

  • Select By name to have all CSS properties within each block reordered alphabetically. CLion ignores vendor-specific prefixes but keeps multiple vendor-specific prefixes for a certain CSS property alpha-sorted.

    border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;

  • To define your own sorting strategy, select the Custom order option and specify the desired sorting order in the field next to it.

    Use commas and spaces as delimiters and skip vendor-specific properties because CLion always groups them with the corresponding one without a prefix. Within such group, properties are sorted by vendor prefix and the prefix-free one comes last.

    Regular Expressions are welcome in the Custom Order list, for example, .* matches any property.

    CLion remembers the modified Custom Order list and restores it if you turn custom sorting off and then turn it on again.

To sort all CSS properties in a file

  • In the main menu, go to Code | Rearrange Code.

  • Alternatively, go to Code | Reformat File in the main menu, and then select Whole file and Rearrange code in the dialog that opens.

tip

For more information, refer to Editor basics: Reformat and rearrange code.

To sort CSS properties within a block

  • Select the block to sort and then select Code | Rearrange Code from the main menu.

  • Alternatively, go to Code | Reformat File in the main menu, and then select Rearrange code in the dialog that opens.

Set from

Click this link and choose the language to be used as the base for the current language code style.

To return to the initial set of code style settings and discard the changes, click Reset.

See also

Procedures

Reference