Code Style Guide: CSS · ginatrapani/ThinkUp Wiki. This is the Code Style guide for CSS. See the main Code Style Guide page for other languages. Indentation Use an indent of two spaces, with no tabs. Names & Capitalization ID names should be in lowerCamelCase. #pageContainer { Class names should be in lowercase, with words separated by underscores. .my_class_name { HTML elements should be in lowercase. body, div { Use External Stylesheets Do not write inline styles or embedded styles unless unavoidable. For performance reasons (see Steve Souder’s blog), always link to external stylesheets using the <link> syntax rather than the import syntax.
<link rel="stylesheet" href="a.css"><! Write Valid CSS ThinkUp’s CSS should be valid to the CSS 2.1 specification. Run any CSS you write through the W3C validator and ensure it passes before submitting a pull request. Comments Comments are strongly encouraged. Comments that refer to selector blocks should be on a separate line immediately before the block to which they refer.
Selectors selector { } selector { } CSS · Styleguide. KSS · Knyle Style Sheets. Inspired by TomDoc KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline. Purpose KSS is a set of guidelines to help you produce an HTML styleguide tied to CSS documentation that is nice to read in plain text, yet structured enough to be automatically extracted and processed by a machine.
KSS focuses on how people work with CSS — it does not define code structures, naming conventions, or methods for abstraction. Style Documentation Unlike TomDoc, not every CSS rule should be documented. KSS documentation is hierarchical in nature — any documentation blocks at any point within the styleguide hierarchy apply to the documentation blocks beneath that level. Format The basic format for KSS documentation can be best explained in an example: /*A button suitable for giving stars to someone. Styleguide.
jQuery. Ai/autoprefixer. CodePen - Front End Developer Playground & Code Editor in the Browser. Testing. CSS Anchors, Links and Pseudo Classes - CSS Basics - Chapter 11. CSS Basics.com Below are the various ways you can use CSS to style links. Now lets take a look at what each one of the above link styles actually does. The first on the list sets the color of a link when no event is occuring The second sets the color a link changes to, when the user has already visited that url The third sets the color a link changes to as the user places their mouse pointer over the link The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links The fifth on the list sets the color a link changes to as it is pressed.
Lets look at an example: Google You must declare the a:link and a:visited before you declare a:hover. Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpage. Then in the (X)HTML file. 20 HTML Best Practices You Should Follow. Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language.
In this article, I will share with you 20 best practices that will lead to clean and correct markup. 1. Always Declare a Doctype The doctype declaration should be the first thing in your HTML documents. I would recommend using the XHTML 1.0 strict doctype. 2. The <title> tag helps make a web page more meaningful and search-engine friendly. Take for instance, the following example: <title>Six Revisions - Web Development and Design Information</title> The example above appears like the following image in Google’s search engine results page: 3. Meta tags make your web page more meaningful for user agents like search engine spiders.
Description Meta Attribute The description meta attribute describes the basic purpose of your web page (a summary of what the web page contains). For example, this description: Shows up in Google’s search engine results page as follows: Keywords Meta Attribute 4. 5. <! GarrettDimon.com. Animate.css. Guidelines for creating better markup.
I’ve mentioned several times here that I feel writing markup (or any other code, for that matter) is a craft. I take pride in writing as lean and clean code as possible. From the looks of things there aren’t a whole lot of other Web professionals that feel that way, but we do exist. One of them is Garrett Dimon, who has touched upon this subject before, and in Markup as a Craft (published at Digital Web Magazine) provides twenty-one guidelines that will help you create better markup.
That’s a lot of guidelines, but they are all relevant and contain very good advice. Highly recommended reading. After reading Garrett’s article I couldn’t resist creating a list of what I think are the six most important guidelines for writing better markup: Keep it simple. What would your most important guidelines for writing better markup be? Translations This article has been translated into the following languages: