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.
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”.
SMACSSIt divides the CSS files in Base, Layout, Module, State and Theme.
ITCSSalso 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.
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.
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/
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.
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.
https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
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.
