Следвайте тези стъпки, за да станете CSS Superstar

CSS (Cascading Style Sheets) е една от основните технологии, използвани за изграждане на уеб страници. Тъй като браузърите могат да разберат САМО езика на таблицата със стилове, важно е да научите CSS задълбочено, за да овладеете уеб разработката.

Много е лесно да започнете с CSS. Само с няколко часа обучение можете лесно да оформите текстове, елементи и оформления. Въпреки това става постепенно трудно и скоро ще стигнете до ситуация, в която вашият код започва да става доста объркан. Компонентите, които са работили преди да започнат да се разбиват, а вие търсите в Google и намирате корекцията, която поправя елемента ви, но прекъсва 5 други елемента, тъй като решението, което сте намерили в Google, промени display или position?

Защо изучаването на CSS по правилния начин е важно

Ако нямате по-задълбочено разбиране на основите, CSS става по-скоро метод на проба и грешка. Ще опитате различни стойности за различни свойства и накрая ще запазите тази, която работи, близо до това, което сте искали, без всъщност да разберете как работи.

Ще започнете да гуглите основни неща като „как да центрирате два div-а“ или „как да подравните div и текст вертикално“ и ще копирате поставянето на кода от StackOverflow или codePen всеки път. В онези дни, когато flexbox не беше толкова популярен, „как да подравните div както вертикално, така и хоризонтално на страница?“ беше класически въпрос за интервю за CSS. Много начинаещи биха могли да направят хоризонталната част правилна, но само малцина са получили правилната вертикална част.

Пътната карта ??

1. Основите?

Ако тепърва започвате уеб разработка, научете някои основи на HTML, преди да стартирате CSS. В CSS първо прочетете теорията за това какво представлява CSS, как работи в браузъра и основния му синтаксис и употреба.

Научете за различните видове налични таблици със стилове, техните разлики, селектори и основни стилове като font-size, widthи heightт.н.

Можете да започнете, като прегледате уроците в MDN.

2. Модел на CSS Box?

Разберете основите на CSS модела на кутията и свързаните с него свойства като margin, borderи padding т.н.

3. Изображения и фон?

Изображенията оживяват уеб страницата. Има много начини за добавяне на изображение, като маркери на изображения, добавяне на цветове на фона / градиенти и фонови изображения към различни други маркери. Можете също така да приложите наученото по-рано, като например задаване на граници към изображения или да използвате множество изображения и да създадете проста галерия.

.image { background-image: url(../images/wallpaper.jpg);}

4. Дисплей и позиция?

Тези две са някои от най-импортираните свойства в CSS, където трябва да обърнете внимание, за да ги разберете правилно. Познаването на тези две свойства може да направи вашето CSS пътуване много по-гладко.

 display: block | inline | inline-block | table | etc

Разберете как се използва всяко от тези display свойства. Ще започнете да забелязвате някои HTML елементи като ike display: block и s l likeiv> <p> or 1> behave lome eements>т; държат се като display: inline.

position: static | absolute | relative | fixed | sticky

Това е едно от свойствата, при което дори опитни програмисти допускат грешки. Научете как работи всеки от тях, как позицията на един елемент влияе на неговите братя и сестри или родител, в какви ситуации ги използвате и т.н.

Тази стъпка е толкова важна, че можете да я повтаряте отново и отново, докато не разберете!

float: left | right

Въпреки че плаващите оформления са малко старо училище, има много стари уебсайтове, които все още използват плавателни оформления.

5. Цветове, шрифтове, списъци и таблици ☑️

Разберете различни цветови формати като HEXкод, rgb, rgba, hsl, hsla, transparentи т.н.

color: white;color: #fff;color: rgb(255, 255, 255);color: rgba(255, 255, 255, 1);color: hsl(0, 100%, 100%);color: hsla(0, 100%, 100%, 1);color: transparent;

Научете как да използвате различни шрифтове. Някои шрифтове не са налични във всички браузъри, така че ще трябва да се научите да добавяте шрифтове ръчно с woffили ttfфайлове или да импортирате google шрифтове.

CSS може да превърне основния неподреден списък< ul> в красива навигационна лента! Преди години таблиците бяха използвани за създаване на оформления на екрана, слава богу, че вече не правим това! ?

6. Псевдокласове и комбинатори ➕

CSS псевдокласът е ключова дума, добавена към селектор, която указва специално състояние на избраните елементи. А псевдо-класа може да бъде толкова просто като :hover или :visitedили нещо сложно, като:nth-last-of-type(odd)

Комбинаторите ни помагат да прилагаме стилове към детски елементи или братя и сестри лесно, без да се налага да създаваме нови класове за всеки от тях.

/* all the paragraph elements inside the container will have color red */
.container > p { color: yellow;}

7. Инструменти за отстраняване на грешки и Dev?

CSS не извежда грешки. Той безшумно разбива потребителския интерфейс, ако не сте стилове правилни? така че да научите как да използвате инструментите на Dev е много важно.

Chrome Dev tools е невероятен инструмент за уеб разработчици. Той е пълен с много страхотни функции за отстраняване на грешки в уебсайта ви в реално време и също така има вградени инструменти за проверка на производителността като фар .

8. Практика Практика Практика?

Съдържанието, което научихте по-горе, е достатъчно за разработване на основен уебсайт, така че в този момент трябва да започнете да практикувате чрез разработване на малки уебсайтове. Ще срещнете различни предизвикателства, когато създавате истинско приложение. За вашата практика можете да разработите прост уебсайт за курорт, да изградите галерия с изображения или блог или също така да създадете няколко основни функции на любимите си социални медии като Facebook или Instagram.

9. Отзивчив уеб дизайн ??

After learning web development for desktop there are a lot of other devices through which the websites are accessed. Supporting these devices is equally important. Before the Responsive design got popular, developers used to design a separate website for mobiles, a separate website for touch-enabled devices etc. remember m.facebook.com and touch.facebook.com?

There are 3 important things in Responsive web design:

Fluid Layouts:

Width set with px does not scale based on the browser window. To make the elements scale based on the browser size, we need to create fluid layouts by setting the sizes in % or rem units.

Media Queries:

A media query is a technique to include a block of CSS properties only if a certain condition is true. We set breakpoints based on our design and change the CSS depending on the browser width.

@media only screen and (max-width: 600px) {

 body {

   background-color: lightblue;

 }

}

Responsive images:

Images scale down as the width of the browser window decreases or if the website is viewed in mobile devices. Sometimes it would be difficult to focus on the important details on a particular image so we’d need to use different images for different screens.

10. Flexbox and Grid ◼️ ⬛ ?

It’s been around 10 years(!) since Flexbox was first introduced, but it was incorporated only recently in 2015. — source

Flexbox and Grid are the styles used to create flexible layouts, and they make our lives so much easier! This is one of the best things that has ever happened to CSS. ?

The layout shown below would have taken more than 300 lines of CSS code without Flexbox or Grid.

11. Transforms, transitions and animations ?

Learning basic transforms and transitions will come in handy if you want to create an interactive web page with moving parts on mouse events or keyboard events such as hover or click.

Before CSS3, animations were done mostly using jQuery — A JavaScript library. Now CSS has become so powerful that we can do complex animations without any JavaScript.

12. Preprocessors ✴️

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. Some of the popular ones are SASS, LESS, STYLUS and POSTCSS.

The SCSS format of SASS is more widely used, so it's good to get started with SASS for development.

The autoprefixer plugin of POSTCSS makes your CSS rules compatible across various browsers by adding extra rules such as -moz- and-webkit-.

13. Frameworks ?

Learning frameworks such as Bootstrap, Semantic-UI or Materialize is optional but very useful for faster development as they provide a lot of styles and layouts out of the box.

These Frameworks are tested across various browsers, so using these will avoid some of the compatibility issues. Most of the frameworks follow the responsive design pattern and lots of free 3rd party templates are be available to get started quickly.

14. Specificity ?

tries to modify a button style of bootstrap but fails, googles for a solution, uses !important , gets all excited thinking that’s the right fix for all the problems!” And that's how you doomed your project! ? If you understand the concept of Specificity correctly, problems regarding overlapping rules in multiple stylesheets will be reduced significantly.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. Each selector has a different weight, and using multiple selectors can change the specificity. If the overall specificities are equal then the order is considered. See the example below:

div.wrapper p.paragraph {

  color: pink;

}#container p{

  color: violet;

}p {

 color: green;

}.paragraph {

 color: yellow;

}

 

This is a dummy text

What do you think would be the colour of the paragraph? ?

15. CSS Architecture ?

Writing CSS code is easy, but writing maintainable CSS code is hard. A proper structure and method have to be followed to write good CSS code. Just following the best practices is not sufficient to write maintainable CSS.

Some of the Architecture patterns for CSS are BEM, OOCSS, SMACSS etc. You can go through the documentation and choose whichever pattern fits your tastes and project.

There you have it! ?

Mastering CSS takes patience and lots of practice. As you start practising you'll experience the awesomeness of CSS. 15 big steps might seem daunting at first but they’re actually not. I loved each and every step, and my experience got better every time. ?

Thanks for reading my article. I hope that you have found this useful. If so, be sure to leave lots of claps! ? (You can leave up to 50 ?)

Want to hire me for your next project? Drop me an email at [email protected] ?