CSS team collaboration specification

Naming Forbidden Abbreviations

  • To be concise and to the pointclassNaming, do not use custom abbreviations.
  • class nameThe naming of must be behavioral and semantic.

It is forbidden to write under non-special circumstances.! important

  • CSS has its own weight design and can be used arbitrarily.! importantIt will cause weight confusion and cannot be maintained.

The width and height cannot be easily defined.

  • Users can set their own browser, for exampleAndroidThe mobile phone can set the display font size, and the dead height will make the fonts overlap each other.

RWD failure

  • The height and width of mobile devices are infinite.
  • Please don’t write Kuan to death.

imgPlease let it scale automatically.

  • Please do not replaceimgSet the width or height of the container to allow it to scale according to the device.
  • Please usebootstrapTheimg-responsive.
  • If you really want to use:

    width: 100%;
    height: auto;
  • If you want to giveimg border-radiusTo set the style, use the parent element to control the behavior and keepimgOnly pictures are loaded, no styles.

Priority usegridTypesetting

  • Please don’t spend much time writingmedia query, set a pile ofbreakpoint, write your own component styles, and control the container width on each device.
  • Please usegrid system, these are mature frameworks, and some have already helped you deal with browser compatibility issues.

Not directlyover writeOr in the original frameclassAdd content

  • Write a new one directlyclassDo not overwrite the original design.
  • Don’t have any moreclassPlease write an additional style separately.

For designing RWD website, please follow the principle of mobile device priority.

  • The design order of the designer is to give priority to the desktop version before designing the mobile phone version.
  • The front-end engineer got the visual map and began to write it.HTML/CSSWhen the mobile phone version is the first priority.

Opening web pages on mobile phones is very much influenced by mobile phone performance and network conditions. Front-end engineers give priority to the mobile phone version from the beginning, allowing HTML to be loaded at the beginning, and loading web pages quickly with minimal performance. When starting to make desktop version, only a little running version, make appropriate fine-tuning.
On the contrary, if the desktop version is made first, it will take more time to adjust when the mobile phone version is cut or run.

Then there’s the iPhoneretina, will automatically double the size of the picture when it is placed on the mobile phone, and will find out whether the picture load is effective or not at the beginning of production. In order to make the picture have a better experience on iPhone, it is suggested that mobile version is preferred.

Not availablehtml tag selector

  • Please define directlyclassThe style of does not need to be specifiedhtml tag.

Levels cannot exceed three levels.

  • More than three layers indicate that the coupling degree is too high and it is not elastic or maintainable.

Use the sameelementDon’t write all the things in it, please separate the typesetting related items.

  • Theborder-radiusWrite inimgAbove, please putimgKeep it clean. Location, e.g.position: absolute;

Don’t be casualnoneOff the screentagOr behavior

  • Please note that if you want tononeSome styles are missing, please decide according to the degree of use.
  • The usage level is all over the website, please use it directly.reset.css
  • Under medium usage, please define oneclass

reset.css

  • commona tagDon’t haveunderline
  • listEliminate original styles
  • Please go toreset.cssIs defined above and set to the first load order

Having JavaScript behaviorclassCan be added for namingname space

#js-project-show {}

Do not use it arbitrarily.br hr tag

  • brIs a line break, please use inp tagInside, whenpIt can be used when there are too many words in it.
  • hrIt is a quick dash, but it will be eliminated soon. Please use it directly.borderWrite inclassInside.
  • brYou have to think about whether the parent blockdisplay: block;If you want to wrap a line, you should think about whether it is the next paragraph.
  • Please use all linesborderWrite.