CodePen & #39; s CSS, codepencss

CodePen's CSS, codepencss
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Translated from: CodePen's CSS

Translated by: front-end whqet development. If this is not the case, you are welcome to correct it.

The translator said: some foreign experts recently shared their own website CSS, from which we learned about the application of css-related technologies, and grasped the usage standards of CSS, translate the CodePen's shared by Chris Coyier today, hoping to help you.

------------------------------------------------------------

Inspired by Mark Otto's GitHub's CSS and Ian Feather's Lonely Planet's CSS, I can't wait to join this activity to talk about how we did it on the CodePen website.

Overview

1. We use SCSS (CSS Preprocessor)

2. We use Autoprefixer (Browser prefix compatibility tool)

3. We use the Rails Asset Pipeline (JS and CSS compression tools)

4. Create a SCSS file to display the document directory.

5. We also have styles, but mainly for good looks.

6. We do not apply to any special architecture except "use classes a bunch ".

7. Strive to ensure that each page uses 2-3 css

8. Use @ mixin for media queries so that we can disable this function at any time.

9. It is a good idea to use annotations.

10. Some statistics

11. I used the word "we", but most of the time it was just "I ".

12. Our possible future

Pre-processor

Some people always like or hate CSS preprocessors, but if there is no Preprocessor, it will become a fantasy to use and maintain variables on any website. If you think that too much tool will lead to a loss of creativity, I can only smile.

Frankly speaking, all mainstream pre-processors (SASS, LESS, and Stylus) can achieve most of my needs, but I prefer SCSS because of good communication communities. Important features of SCSS are listed below (arranged based on importance ):

A. @ import

B. @ mixin

C. nesting

D. variables

E. @ extend

F. math

G. loops

H. working with them enough so I understand all the cool kid demos

It adds some incredible features (I can't even imagine ).

Prefix Processing

I almost don't consider the issue of the browser prefix of css attributes and values, because Autoprefixer can solve this problem very well, and I especially like its performance when dealing with flexbox.

I used to use Compass frequently before, but I found that all the 95% I used came from CSS3 @ minxins. I prefer to use the same method as the native CSS, as opposed to using @ include everywhere just for the prefix.

One thing I miss about Compass is its ability to generate SVG gradient, ......, Some things that IE9 needs are too large, so I think I don't have much to lose.

Rails

I am a crazy fan of Rails Asset Pipeline. For example, I put these in the view.

    <%= stylesheet_link_tag "about/about" %>

It will generate a css when I need it.

<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/css" />

We set a long expiration time. Every time we deploy the service, it breaks the cache by changing these garbled numbers. Therefore, the cache configuration is very good.

On the CodePen website, we do use Sprockets, but it only works for Javascript like this:

    //= require common/whatever.js    //= require_tree ./../hearting/

This can also be done in CSS, but it is not necessary:

A. SASS can do this

B. If SASS is used to solve the problem, the dependency is better. For example, both $ variables and @ mixin can be used across files.

File organization

A dedicated SCSS file is used only to display the CSS file to be loaded, which is equivalent to a directory without any practical work. For example, the website's global. scss is like this:

// General Dependencies    @import "global/colors";    @import "global/bits";// Base    @import "global/reset";    @import "global/layout";// Areas    @import "global/header";    @import "global/footer";// Patterns    @import "global/typography";    @import "global/forms";    @import "global/toolbox";    @import "global/buttons";        @import "global/modals";    @import "global/messages";    @import "global/badges";// Third-Party Components    // (none at the moment)

I tried to keep this, but there were a lot of unexpected situations. I had to throw all these items that should be imported into a file, therefore, I have created a shame file (a brilliant file) to achieve this goal.

@import "shame";  // get organized, ya schlub.

Code Organization

Regulations executed like obsessive-compulsive disorder

A. indent two blank spaces for attributes and nested applications

B. Add a blank field before and after the selector.

C. one statement per line (important for differentiation)

D. Add a blank space.

E. Give the terminator} an indent level equivalent to its Selector

When f.0 is used as the length, no unit is added.

G. use hyphens without underscores

In most cases, I will follow the rules

Unrelated declarative blocks are not added with blank lines.

.thing {}.related-thing {}

Add a blank line between a slightly correlated declarative Block

.thing {}.another-thing {}

Two blank lines are added between unrelated declared blocks.

.thing {}.totally-different-thing {}

Some rules that I don't really care about

Attribute order. The relevant attributes are displayed in a classic combination.

The style used for the annotation.

In practice, I do not even follow the rules I have written.

Architecture

My theory is to try to add a class to all elements. I don't know if it is close to SMACSS, OOCSS, BEM, or so.

Of course, it doesn't mean that I no longer do any nesting, or that I have to specify how many layers can be nested, but I just don't do deep nesting.

In general, I often do this:

.box {   h2 {    &:after {    }  }}

At this time, I will wonder whether I should give h2 a class and whether I should make this type of title into a reusable component. Then I don't care, because if it becomes very common in the future, I can easily modify it.

The general philosophy is to maintain a low degree of particularity. No matter how good the reusability is, it is always possible to overwrite multiple times, so the lower the specificity of the selector, the easier it is to overwrite. In addition, we can easily overwrite the data again without using the ID selector or! Important.

The unit of rem for text, px for other units, of course, is also unexpected.

Request

I try to ensure that each page loads 2-3 css requests

• Global.css
• Page.css (if not the editor)
• Section.css (if needed)

Minimize the number of page requests, but not put everything in a file. Codepenthere are too many single-page cssws. It will be overwhelmed if all of them are stored in external go global.css. I have not tried it. Maybe it will be interesting to try it that day. The name is squiCSSh_it_real_good.

Media Query

I use @ minxin to implement media queries. Sometimes I use "this width and bigger", and sometimes "this width and smaller" (you can check the media query logic ). Similar to this:

@mixin breakpoint($point) {  @if ($MQs == true) {    @if $point == baby-bear {      @media (max-width: 500px) { @content; }    }    @if $point == mama-bear {      @media (max-width: 700px) { @content; }    }    @if $point == papa-bear {      @media (max-width: 800px) { @content; }    }    @if $point == super-bear {      @media (max-width: 1280px) { @content; }    }    @if $point == reverso-baby-bear {      @media (min-width: 501px) { @content; }    }    @if $point == reverso-mama-bear {      @media (min-width: 701px) { @content; }    }    @if $point == reverso-papa-bear {      @media (min-width: 801px) { @content; }    }    @if $point == reverso-super-bear {      @media (min-width: 1281px) { @content; }    }    @if $point == exclusive-baby-bear {      @media (max-width: 500px) { @content; }    }    @if $point == exclusive-mama-bear {      @media (min-width: 501px) and (max-width: 800px) { @content; }    }    @if $point == exclusive-papa-bear {      @media (min-width: 801px) and (max-width: 1280px) { @content; }    }    @if $point == iOS {      @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {         @content;       }    }  }}

Note that the "@ if ($ MQs = true)" statement in the mixin header enables and disables the media query function, declare a variable $ MQs (true or false) control switch in the header of the scss file in the content directory. Some pages in CodePen need responsive layout while others do not. pages without responsive layout may jump to a specific mobile version.

Note

I am a annotator liberal, mainly because I never regret it. If it is not clear or inappropriate, I will delete it directly.

.drag-from-pen-grid {  padding-bottom: 52px; /* adding this to make room for pagination. A little magic-numbery... */}

Statistics

There are a total of 160 separate SCSS files, and I never worry about not finding them, because Sublime provides powerful query functions and the files are clearly named and structured.

A total of 13345 lines of SCSS files

Global.css 11.8 k

Page.css 5.5 k

Editor.css 6.2 k

Css files are not a key factor affecting performance. The Custom font is four times higher than that of the file, and the JS file is 10 times higher than that of the file.

Just me

The website is developed by three people. I am responsible for CSS.

Future

I don't have lint now. I will use lint javascript. That would be nice.

I didn't create a local resource map, just because I don't think Sass/chrome can be well supported now.

I don't have a real mode class library. Creating a visual mode class library may be great.

Enjoy it.

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------

How does CODEPEN and codecademy edit css html js on the same page and display the results page?

Without words, go to the West Building, and the month is like a hook. Lonely Wutong deep courtyard lock autumn.
It's just a worry. It is not the general taste in my mind.

Wu yeching Li Yan
Lin Hua thanked chunhong and was in a hurry.
Rouge tears, stay drunk, when heavy. Self-growth and hate.

CSS changes Image

I disagree with the upstairs Method
Why should I use js for implementation?
Isn't css enough to implement all the images in the layer?
Like this:
<Style type = "text/css">
# Divid {} // parent layer name Definition
# Divid img {width: 100px; height: 100px; border: 1px solid # ddd; padding: 1px;} // all the image attributes under the parent layer are defined here
</Style>
<Div id = "divid">

...

</Div>
In this way, all the image attributes in the divid layer are defined.