2

CSS summary

-4. CSS ARCHITECTURE-

<h3>Benefits of using these methods.</h3>

Chosen or following a method to organize the code it’s a best practice and a must to do in big projects where the code can extend thousands of lines.
The main goals are the reuse of the code, sustainable, and scalable process. For that there are some used methods, it’s advice to follow one of this first.

<h3>OOCSS, BEM, SMACSS, ITCSS, and Atomic Design.</h3>

OOCSS Object Orientation Css, this separates the design from the content. The method put the repetitive code in a class, this class will be applied to the specific elements.
BEM Most used method, it says Block its Elements and later the modifiers. The method establishes a rule when the class is made: “.Block__Element—Modifier”.
SMACSSIt divides the CSS files in Base, Layout, Module, State and Theme.
ITCSSalso know as the Inverse triangle of CSS. It helps with the specificity of elements also it divides the files into several groups following the mentioned specificity, clarity, and magnitude.
Atomic Design based in themistry, it divides CSS into atoms, molecules, organism, templated, and pages.

-5.COMPONENTS CONSTRUCTION-

<h3>What is a component.</h3>

Are the blocks that the App can be divided, and each block can be divided, following this process until it’s indivisible.
After all the components have been identified it’s time to pass those into code. To create a component design system, it’s used storybook as tool. Here more information https://storybook.js.org/docs/react/configure/styling-and-css.

-6. LAYOUT AND RESPONSIVE DESIGN-

<h3>Flexbox.</h3>

This display helps with the alignment of several items inside an element. Here there are two useful links to learn more about flexbox properties:
https://darekkay.com/dev/flexbox-cheatsheet.html
https://flexboxfroggy.com/

<h3>Layout system with CSS grid.</h3>

It allows managing the layout of the website. To help and see all the combinations possible available thanks to this display I share the following links:
https://cssgridgarden.com/#es -This is a game to learn.
https://labs.jensimmons.com/ -Web site of Mozilla developer about Grid.

<h3>Media Queries.</h3>

For a responsive design, it’s used in CSS the media queries, the line code to use these are:
“@media only screen and (max-width: px){}” inside the brackets are found the selectors that will suffer a modification.
It is a best practice to follow the method of mobile-first, so the changes will be more stable. But if the App it’s mainly for Desktop, then one can skip this path.

<h3>Learn CSS gaming.</h3>

https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

-7. ACCESSIBILITY-

For people who has difficulties and use screen readers. There are programs that can help us to read the website and understand how to improve the semantic to make easier the read.
Some of this programs are “Voiceover” and to see where the accessibility fails we have “Andi”. There are attributes like “tab index” or “aria-label” that will help to fix the errors that Andi see in the website’s semantic.

Escribe tu comentario
+ 2