Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the CSS writing style and file directory advocated by GitHub, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Coding style:

1. Indent with "soft-tabs" with two spaces

two。 Add a space after the ":" of the attribute declaration

3. Add a space before "{" after the rule declaration

4. Use hexadecimal color code # 000, if you don't use RGBA

5. Use / / as a comment block (instead of / * /)

6. The document style is the same as KSS.

7. Here is a good example of syntax:

CSS Code copies content to the clipboard

/ / This is a good example! .styleguide-format {border: 1px solid # 0f0; color: # 000; background: rgba

SCSS style:

Any $variable or @ mixin that will be used in multiple files should be placed under globals/. The rest should be placed at the top of the file that uses it.

As a rule of thumb, do not use more than 3 layers of nesting. If you find that you are going to use more than three layers, think about reorganizing your rules.

Document organization:

In general, the CSS file organization should look like this:

Styles

├── components

│ ├── comments.scss

│ └── listings.scss

├── globals

│ ├── browser_helpers.scss

│ ├── responsive_helpers.scss

│ ├── variables.scss

├── plugins

│ ├── jquery.fancybox-1.3.4.css

│ └── reset.scss

├── sections

│ ├── issues.scss

│ ├── profile.scss

└── shared

├── forms.scss

└── markdown.scss

Use Spockets to get the file. However, you should explicitly import any SCSS that does not produce globals/ in a particular SCSS file. Here is a good example:

CSS Code copies content to the clipboard

/ / = require_tree. / plugins / / = require my_awesome_styles @ import ".. / globals/basic"; .rule {.}

Pixels vs. Ems:

Use px on font-size because it provides absolute control over words. In addition, you prefer to use unitless line-height because it does not inherit the percentage value of the parent element, but is based on multiples of the font size.

Naming convention for Class:

Do not reference the class name of the js- prefix in the css file. Js- is used only by js files. The status rules shared in css and js use the is- prefix.

Specificity (classes vs. Ids)

Make sure that the element that appears once in the page should use IDs. Otherwise, use Class. Use Class when you are uncertain.

1. You should use ID's: header,footer, pop-up window

two。 Should not use ID: navigation, list elements, etc.

When styling a component, start with the element + class name (more inclined to the class name) and prefer to use the direct descendant selector (>) by default. Use as few special ones as possible. Here is an example:

XML/HTML Code copies content to the clipboard

Category 1 Category 2 Category 3

CSS Code copies content to the clipboard

Ul.category-list {/ / element + class namespace & > li {/ / direct descendant selector > for list items list-style-type: disc;} a {/ / minimal specificity for all links color: # ff0000;}}

CSS specific guidelines:

If you have to use an id selector, make sure there is only one in your rule declaration. Like # header .search # quicksearch {… This is considered to be bad.

When modifying an existing element for special use, try using the class name. Use .listings-layout.listings-bigger instead of .listings-layout.bigger. Think of ack/grep in your future code.

Class names like disabled, mousedown, danger, hover, selected,active should have a class as a namespace (button.selected is a good example)

Experimental function:

We want internal use and experimental features. Some discipline is needed when writing css because existing features and experimental features of css will be provided at the same time. Always keep these goals in mind:

1. When writing styles for new features, don't affect the styles of existing features.

two。 It can be easily removed when the experimental function is not working.

3. The css of the old feature can be easily removed when the new feature is online

4. When developing beta or experimental functionality, replace the root namespace with the-experimental variable and discard the existing root node. In general, it is best to repeat style experimental blocks rather than trying and extending existing styles.

An existing feature:

XML/HTML Code copies content to the clipboard

Notifications Messages dragon commented on Issue # 551 mojombo commented on Issue # 91 defunkt uploaded a new file to defunkt/resque

CSS Code copies content to the clipboard

/ / Deprecated: Existing notifications + messages design. To be removed when / / notifications-next ships. / Styleguide 4.5.1. Ul.navigation {float: left; width: 200px; background: # eee;} .notification-listing {& > a {display: block; font-weight: bold } after reading the above, do you have any further understanding of the CSS writing style and file directory advocated by GitHub? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.