You may think that Notepad is not the best when writing CSS. Are there any CSS editing tools that can improve the efficiency of our coding?
TopStyle (click to download: TopStyle V3.5 Beta 4) is a CSS editing tool that I have been using. I used it randomly at first and did not study it carefully. But then I took a closer look at the functions inside and found that its functions are really powerful. !
Let me share my experience here. The shortcut keys I commonly use when editing CSS:
Text annotation: Shift+Ctrl+M
Indent right: Shift+Ctrl+.
Indent left: Shift+Ctrl+,
Next CSS: Ctrl+]
Previous CSS: Ctrl+[
Select color: Shift+Ctrl+C
Can't undo (Ctrl+Z) after saving?
Let's change it. The option location: Options--Editor--select Enable undo after save
to automatically replace. For example, if you type "!i" and then press a space, TopStyle will automatically replace "!i" with "!important"
Option location: Options--Editor--Auto Replace You can also add shortcut input yourself.
Tree CSS
Do you sometimes feel that there is too much CSS and it is difficult to browse? TopStyle provides a shorthand form that hides CSS content and only displays the selector name, which is very convenient.
Option location: Options--Editor--Rule Collapsing Select Enable rule collapsing
to quickly verify. The W3C CSS Validator and W3C HTML Validator buttons in the shortcut menu are very convenient. After editing, you can know whether the verification has passed with just one click.
The style sheet cleaner below strongly recommends TopStyle with its own CSS organizing function. Style Sweeper. It can organize your CSS very neatly and standardizedly. A very nice feature.
Option location: Tools--Style Sweeper
Rules Rules panel: Rule Format You can set a single line and multiple lines to display.
Combine Rules sets whether CSS with the same properties will be combined.
Selectors selector panel: Selector Case sets the case of the selector.
Selector order sets the sorting method of selectors.
Property panel: Property Case sets the case of the property.
Property order sets the ordering of properties. Shorthand Properties abbreviation property panel: You can choose to abbreviate the font, background, margin, and padding properties.
Others Other property panels:
Color Format Color format: You can choose hexadecimal, RGB, color name, etc.
Having said all this, I still hope that everyone can continue to improve their CSS abilities in practice. TopStyle is a good helper!