Easy CSS editing with TopStyle Lite
Ever try to track down a problem in your CSS file and find yourself frustrated in tracking down the exact class or id? When a CSS gets to be a certain length it can be a bear to maintain. CSS files are typically organized logically, never alphabetically so things are easier to find.
I have found using the Find function within my text editor is an inefficient way to find my way around my CSS files.
With TopStyle Lite, I have found an easy way to edit and maintain my CSS files.
The benefit of TS Lite is the ease of editing. If you are looking for a tool to help with CSS layouts, etc. then you will want to consider more professional versions. TS Lite helps me see my CSS files in a very organized way. There are two key panes in TS Lite. The Style Sheet pane and the Style Inspector Pane. The Style Sheet pane displays the CSS file you currently have open.
Sometimes a CSS file looks like a blur when viewed in a regular b&w text editor. Items within TS Lite are color coded for easy identification and readability. Color coding also helps in trouble shooting. It is easy to find missing dark blue parentheses, etc.
The Style Inspector pane is divided into two tabs: selectors and properties.
The selectors tab displays all the elements, classes and ids in the style sheet. As a reminder, elements are all items that are “standard” parts of html such as ‘body’, ‘table’, ‘h1′, etc. Classes are items defined by a period (’.') and are typically meant to be reusable. ID’s are items defined by the pound sign (’#') and refer to very specific elements typically used only once per page.
These three categories are displayed in a tree format. Below are screenshots of the three categories:
The organizational tree is extremely helpful. The item is placed in alphabetically ordered within the appropriate category. Need to find your #header id? Very easy to find. No more looking through your whole file trying to remember if you placed it at the top, in the middle or at the bottom.
Simply clicking on the element from the selector tab puts your cursor at the very place it occurs within your file. This is displayed in the Style Sheet pane.
For example, clicking on ‘body’ under elements will place your cursor right before the ‘body’ entry in the CSS pane.
Editing from that point is easy. Manually type the new code and click save.
If you are editing from the CSS Pane you have another option for adding properties. Instead of manually adding them, a property tab is available. The property tab looks like the image below.
The property tab lets you add properties view point and click. Its a nice feature to have only if you are unsure of the syntax. Once you get familiar with the syntax it is easier to type the code out manually. However, it can definitely be a benefit to beginners.
TS Lite also has a preview pane which will preview your CSS file. It previews colors and formatting. Keep in mind that it will not correctly disp
Is the PRO version of TopStyle or any purchased CSS editor worth it?
For the beginner I would say “no”. Save your pennies for other things. If you find you are doing A LOT of CSS work then I would download the trial version of TopStyle PRO and see if it meets your needs. If you only do occasional CSS work, then your text editor and TSLite are all you need.
