Functional CSS | CSS Methodology

What is Functional CSS, How it works and difference between inline styles and Atomic CSS. CSS Methodologies explained. css architecture BEM vs functional.

#functionalCSS #CSSMethodology, #CSSTutorial

Help the channel via patron and buying merchandise

Udemy Course

Follow me for technology updates

Help me translate this video.

[ningyima]

Actually I started to use this approach to build some big scale web site CSS framework long time back. It's a very good practice. Thanks for the video.

[matthewmetsoja]

Nice video! seems like a real game changer

[fregattkapitany]

I know this technique as fragmented CSS in HTML newsletter design and it proves especially useful as the body of these letters typically consist of a mess of complicated deeply embedded table structures and you cannot even use most old HTML4 tags – forget about HTML5 completely! – to add some semantics that could be relied on in css. Instead, using a stylesheet with complete sets of incremental css selector rules like left1, 2, 3 …. 10, size9, 10 … 15…21, 30, f-verdana, or color-white makes it possible to do editing very quickly and efficiently.

[anisdabdi]

Love this channel, a huge amounts of solid advanced infos, thanks a lot

[sagshah]

would'nt it have been easier if you did something like:

HTML:
div class="someClass"> This is a div </div>
div class="someClass thisCass"> This is another div </div>
CSS:
.someClass{ font-size: 30px, background : blue, color: yellow}
.thisClass{background : yellow, color: blue}
?

[christmasvillage]

very practical and I use similar approach in my previous work place. Thanks!! and Wonton is awesome.

[yashpandey]

It's this very similar to the bootstrap styling ? There are predefined classes that we use to style our responsive page.

[javascript_developer]

is the tailwind.css is one of example of functional css ?

[Loficomposer]

man thank you for keeping us updated and curious to learn new stuff like this thank you

[Simplified-Growth]

You should check out ITCSS: Inverted Triangle CSS.

[Kay_Drechsler]

I also tried this approach but unfortunately I have to advocate against it. As you said it makes complex components very hard to read. Therefor it just ended up on taking too much time to change them for me. I sacrificed a huge amount of productivity.
The key for me is to really know an effective and efficient stack of selectors, document and to exchange on the architecture with others instead of using this really verbose similar to inline styles approach.
I could imagine that this could work on smaller projects though instead of a large scale architecture.

[amigaanguy]

I have never used JS Interfaces while coding. Can you please create a use case explaining this concept?

[tahasoft]

As you said I tried tailwindcss. At the beginning I didn't like it. But later, WOW it's really awesome!

[slmjkdbtl]

By limiting the number of primitives, it's also a good way to enforce visual consistency. The biggest drawback to me is now the layout code and the style code now is more mixed together than ever

[NeoCoding]

Cool!! Can we group all this short classes into composed classes inside css (like we compose fns) and later put them to our html elements? Can I do this with plain css? Tnks!

[boogieBlackBear]

Have you try ITCSS / inuitcss ? To me it 's a better architecture for been reusable and maintainable

[sivanandamv]

your tutorials are very useful bro. Please make videos on Rxjs with Angular. It would be very useful. Suggested topics: Observables vs Promises, where to use subscribe and promises.

[CoryTheSimmons]

I don't like how it clutters my markup so I did this neat trick where I add a word to the element in the markup, then in another file I assign styles to it like `.brd-red` except I type stuff like `border: 1px solid red`. It's really flexible and called CSS.

[rajasekharreddy]

When will launch JavaScript course in udemy

[MahanteshGurav]

How is sass, compared to fictional css