Codepen ' s CSS

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

Translated from: Codepen ' s CSS

Translator: Front-end development Whqet, free translation mainly, improper place welcome everyone to correct.

Translator said: Recently some foreign Daniel to share their web site CSS, from which we understand the application of CSS technology, grasp the use of CSS norms, today under the translation of Chris Coyier share of the Codepen ' s, I hope we can give you some help.

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

I can't wait to get inspired by Mark Otto's GitHub CSS and Ian Feather's Lonely Planet's CSS, and I'm eager to join this event 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, CSS Compression tool )

4. Get a Scss file to display the document directory

5. We also have the style, when the main is to look good

6. We do not apply any special architecture except "Use Classes a bunch"

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

8. Use @mixin to make media inquiries so that we can turn this feature off at any time

9. Using annotations is a good idea.

10. Some statistics

11. I use our word, but most of the time it's just me.

12. Our Possible future

Preprocessor

There are always people who like or hate CSS preprocessor, but if you don't have a preprocessor, you'll want to use and maintain variables on any website. If you think that because of the transition tool will be lost creativity, I can only laugh.

Frankly speaking, all major preprocessor (SASS, less, Stylus) can achieve most of my needs, but I prefer scss because of good communication community. Below is a list of Scss's useful degrees:

[Email protected]

[Email protected]

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 it).

prefix processing

I hardly think about CSS properties and the value of the browser prefix problem, because autoprefixer can solve this problem very well, I particularly like its performance when dealing with Flexbox.

I used to use compass a lot, but I found that the 95% I used was from CSS3 @minxins, and I prefer to use the same kind of writing as native CSS, as opposed to using @include everywhere just for prefixes.

One of the things I miss about Compass now is its ability to generate SVG gradients, but ..., just for the sake of IE9, it's a little too big, so I guess I don't have much to lose.

Rails

I'm 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 very long expiration time. Every time we deploy it, it breaks the cache by changing these garbled numbers, so the cache configuration is very good.

On the Codepen site we do use sprockets, but only for JavaScript, which works like this:

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

This could have been done in CSS, but not necessarily:

A.sass can do that.

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

File Organization

There is a dedicated scss file that only shows the CSS files that need to be loaded, the equivalent of a directory, without doing anything real. For example, the global.scss of the website is 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 up, but there were a lot of surprises, and I had to throw all these things into a file, so I created a shame file (not a very glorious one) to do that.

@import "Shame";  Get organized, ya schlub.

Code Organization

Code that executes like obsessive-compulsive disorder.

A. Applying 2 blank indents to attributes and nesting

B. Add a blank before and after the selector

C. One declaration per line (very important for differentiation)

D.: Add a blank after

E. Give Terminator} an indent level equivalent to its selector

f.0 as length, without unit

G. Use hyphens without underlining

In most cases I will abide by the norm

Non-empty lines between very relevant declaration blocks

. thing {}.related-thing {}

A slightly more relevant declaration block with a blank line between them

. thing {}.another-thing {}

A very unrelated declaration block with two blank lines

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

Some of the specs that I don't really care about

The order of the attributes, whether the related attributes appear in a classic combination, or casually.

The style used by the comment.

In actual use, I don't even follow the specifications I wrote.

Architecture

My theory is, to try to add a class to all the elements, I don't know if it's not close to Smacss,oocss,bem, or something like that.

Of course, it's not that I'm not nesting any more, or that I'm forced to nest layers, I just don't do deep nesting.

In general, I often do this:

. box {   H2 {    &:after {    }  }}

This time I will think whether I should give H2 a class, whether I should put this type of title into a reusable component. Then I don't care, because later if it becomes very common, I can easily modify.

The general philosophy is to keep the particularity low. Because no matter how good reusability, it is always possible to overwrite multiple times, so the specificity of the selector is lower, the more easily overwritten. And this overlay can be more easily overwritten, without having to go to the extreme of the ID selector or!important.

REM as a unit of text, PX for other units, of course, there are accidents.

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)

Try to reduce the number of requests on the page, but not to put everything in one file. Codepen There are too many separate page CSS, if all put to a piece to global.css will be overwhelmed, I did not try, maybe that day try also very interesting, a name called Squicssh_it_real_good.

Media Enquiry

I use @minxin to implement media queries, sometimes I use "this width and bigger", sometimes with "this width and smaller" (you can look at 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 Mixin header statement "@if ($MQs = = True)" Enables the media query feature to be turned on and off, declaring a variable $mqs (TRUE or false) control switch on the Scss file header of the content directory. Because some of the pages in the Codepen need a responsive layout and other pages do not, pages that do not have a responsive layout may jump to a dedicated mobile version.

Comments

I am a comment liberal, mainly because I never regret it, and if the comment is not clear and inappropriate later, I will delete the comment directly.

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

Some statistics

A total of 160 separate scss files, I never worry about finding files, because sublime provides a powerful query function, and the file has a clear name and structure.

SCSS File Total 13345 lines

Global.css file 11.8k

Page.css file 5.5k

Editor.css file 6.2k

CSS file is not a key factor affecting performance, custom font four times times with it, JS file 10 times times with it.

It's just me.

Web site by three people co-development, the CSS aspect is mainly I responsible.

Future

I'm not lint now, I'm going to lint JavaScript, that would be great.

I did not create a local resource map, just because I think that now sass/chrome not very good support

I don't have a real pattern class library. It might be great to create a visual pattern class library.

Enjoy it.

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

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.
---------------------------------------------------------------------------------------------------------